Reducing Mobile Size

[Morgin]

I just tried out the more accessible page size/zoom tools in ios13. 

this is at 75% size, which IMO is a huge improvement over the default mobile skin (which while I think is great, my primary complain about has always been that everything is so big).

anyone have any idea through css if there is an easy way to essentially make this the default by reducing everything in the phone size css to 75% of its default size?

 

Edited September 20, 2019 by Morgin

[Morgin]

Hey @Rikki - you had provided me the css to insert into custom.css to achieve this. Unfortunately, I had asked this on the invisionalpha site and I neglectfully didn’t copy your answer to somewhere safe in case I ever lost it. I reset my custom.css in anticipation of 4.5 upgrade, and have subsequently lost it. When you have time, obviously not urgent, any chance if you still have access to that board you could repost here, or alternatively if you know this off the top of your head you could retype it here? Thanks!

[Rikki]

If I remember correctly, this is the sort of thing I suggested:

body {
  zoom: 0.9;
}

 

[Morgin]

16 hours ago, Rikki said:

If I remember correctly, this is the sort of thing I suggested:

body {
  zoom: 0.9;
}

 

That’s right - I think you also had directed me how to use the media query or viewport check or whatever to ensure this was only applicable if it was a phone size device, as I was trying to do it by targeting the responsive classes which was the wrong approach. 

[Rikki]

10 minutes ago, Morgin said:

That’s right - I think you also had directed me how to use the media query or viewport check or whatever to ensure this was only applicable if it was a phone size device, as I was trying to do it by targeting the responsive classes which was the wrong approach. 

Oh that's right, this is what you'd need:

@media screen and (max-width: 767px) {
	body {
		zoom: 0.8;
	}
}