Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Default zoom without CSS method?

I recently switched back to the Mac world through a MacBook Pro 15". I like Safari a lot, but the default 100% zoom level makes text hard to read on most websites. Since Safari doesn't allow a default zoom level (that I know of), I have to click on the zoom+ button on the toolbar for almost every single website I visit, which gets old pretty fast.


Setting a bottom limit size for fonts in the Preferences that is over 12 will break many websites, so I have to leave it at 12.


The CSS method that you find as soon as you do a search on this, consisting of:


body {

zoom: 130%;

}


...also breaks many websites. It is definitely not the same as clicking the zoom+ or pressing cmd+ once or twice, even if you set the zoom property to 110%.


There are a small number of extensions that show up when you do a search for zoom, but I tried them all and they also rely on the CSS method. This is easy to tell because they work not by changing the zoom level in the native way but instead in addition to it. I know this sounds confusing, but here's what I mean: take for example the extension simply called "Zoom", which puts a button on the toolbar with a Z on it, which shows a slider, a number input field and - and + buttons when you click on it. Its behavior changes depending on the website. On this one, for example, if you use the Safari native method and you click on zoom + once, everything enlarges, including the text I'm typing right now. If you leave the Safari native zoom at 100%, but instead click on the Z extension's + button, or enter the zoom yourself, everything else enlarges except the text in this box where I'm typing. And its behavior on many websites is very unpredictable. This is not just this particular extension, all the zoom extensions behave the same way because they use the CSS method rather than the native one.


I'm not blaming the extensions' developers for this, maybe Apple doesn't allow access to the native method and this is the best they can do.


So is there any way to set Safari to always start at a default native zoom? All I need is just one click (which I don't know what number that is because it doesn't say anywhere). For every website I open, I clicking just once on the zoom+ button or pressing cmd+ once gives me the perfect zoom.


Thanks,


Sebastian

MacBook Pro with Retina display, OS X Yosemite (10.10.3), 15 inch, mid 2015, 2.5, 16, 512

Posted on Jul 14, 2015 9:17 AM

Reply
12 replies

Jul 15, 2015 3:33 PM in response to RobFocus

Hi Sebastian,


I've travelled a similar CSS journey looking for a solution with results similar to the ones you've expressed. While third-party Safari extensions such as Stylish for Safari or Quickstyle are fun to play with, they all ultimately fail to provide an elegant solution. Variously they fail because they don't increase the containers that text or image elements reside in, adjusting specific classnames or ID values is overly complicated, changes only apply to individual websites, changes don't persist, etc. The best solution is yet to exist: an option in Safari to set the default zoom level.


The only solutions I can suggest are workarounds, or call them kludges if you distain their necessity and gracelessness. For instance, although not a global solution, it is quick and intuitive to zoom using the two finger zoom gesture (finger spread) on the trackpad. A more global solution is to temporarily set your display at a lower resolution. This works particularly well if you use Safari in full screen mode as the window will self-adjust. You may find this solution unsuitable though if you only use Safari for brief periods interspersed with the use of other apps. The required resizing of some app windows when returning to a prior resolution may be more effort than the solution is worth. You may also find the slight blurring of text as a result of scaling when using a non-native resolution an irritant. I'd be remiss if I didn't also mention that you can set display zoom in the Accessibility pane of System Preferences, although you may not like the movement of the screen image as only a portion of the screen (the desktop bounds) is viewable at one time.


There are third-party apps, such as Display Menu, to quickly change display resolutions from a menu extra or menulet sitting in the menu bar. For convenience, some apps may offer a keyboard shortcut to change resolutions or provide support for scripting. For instance, using Display Menu you might write an AppleScript to toggle two resolutions you like:

tell application "Display Menu" set theResolution to current resolution if (theResolution = "1440 x 900 non-Retina") then select resolution "1344 x 840 non-Retina" else select resolution "1440 x 900 non-Retina" end if end tell


To quickly toggle resolutions, create an Automator service using the script and bind a keyboard shortcut to it. Alternatively, use a third-party app such as FastScripts to assign a shortcut.


If you rely on Safari's integration with OS X, the choice for now is to use a workaround or continue using the zoom tool bar buttons or keyboard shortcuts.

Jul 24, 2015 9:12 PM in response to RobFocus

RobFocus wrote:


The CSS method that you find as soon as you do a search on this, consisting of:


body {

zoom: 130%;

}


...also breaks many websites. It is definitely not the same as clicking the zoom+ or pressing cmd+ once or twice, even if you set the zoom property to 110%.


Try using the zoom property on the full web document. Either by percent:


html {

zoom: 120%;

}


or a floating-point number:


html {

zoom: 1.2;

}


Save as a plain text file with a .css extension and select the file from the Advanced pane of Safari Preferences.


User uploaded file


I found 120% or 1.2 equivalent to one zoom button press (⌘+) and 144% or 1.44 equivalent to two zoom button presses.


User uploaded file


https://drafts.csswg.org/css-device-adapt/#zoom-desc

Jul 24, 2015 10:02 PM in response to Roote

Unfortunately it doesn't work well on YouTube. A friend sent me this link https://www.youtube.com/watch?v=-_U6165DVeM. When I opened it, the left edge of the video had no margin, but that wouldn't be a big problem. What is a dealbreaker is that when pressing the full screen control, the video got completely messed up and shifted downwards. Unselecting the CSS document in the preferences solved that.

May 4, 2016 3:56 AM in response to RobFocus

Dear Sebastian,


you are right. The css "body { zoom: 130%;}" is not working properly nor any of the extensions.

And I really want Safari to remember the zoom setting by site.



I was searching a lot in the last months. Finally yesterday I thought that it might be possible with a script. I googled "tell safari zoom" and I found this:


http://hints.macworld.com/article.php?story=20100117104428919


Please read everything there carefully.

I used the third code. My language is German, so I had to change the words

"Actual Size" and two times "View"

into the menu texts in German.

Also I had to go to

system preferences - security - privacy - apps can control your computer

and there add the script app and enable it.

If the script is not working, go there agin and check if it is still enabled.


It works well for me, also the youtube videos are shown correctly incl. the navigation in the bottom of the video.


Finally!



Also interesting: http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-ch ange-browser-zoo/



Best regards

Mathias

from Germany

Default zoom without CSS method?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.