Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Set default zoom level in Safari using a CSS file Web Browsers
In this post on Apple's discussion site, user dearlt posted a great tip on how to get Safari to use a default zoom level of your own choosing (instead of the standard 100%). I've edited the post a bit to make it clearer, but the basic instructions are unchanged.
  1. Create a file (using a pure text editor) named defaultzoom.css, or any name you like -- just make sure it has a .css extension.
  2. Copy and paste the following code into the file:
    body {
    zoom: 130%;
    }
    Change 130 to whatever number suits you. Anything greater than 100 means zoom in; less than 100 means zoom out. Don't forget the % percent sign!

    If you're using TextEdit on a Mac, be sure to have it create .txt documents by default (not .rft) before copying and pasting the above text. You can set this by going to Preferences » New Document » Format. When you save the file, a warning will come up stating that .txt is the standard extension, but you will be given the option of .txt or .css.
  3. Save your file and close the editor.
  4. In Safari, go to Preferences » Advanced. Under Style Sheet, select Other, and point it to the file you created. You may need to restart Safari for the change to take effect.
Voila. Hope that helps someone. (Note that this should work on both OS X and Windows versions of Safari.
    •    
  • Currently 3.76 / 5
  You rated: 5 / 5 (29 votes cast)
 
[72,933 views]  

Set default zoom level in Safari using a CSS file | 19 comments | Create New Account
Click here to return to the 'Set default zoom level in Safari using a CSS file' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Set default zoom level in Safari using a CSS file
Authored by: KingRocky on Nov 02, '09 07:53:11AM

This does work, however I've noticed that radio buttons tend to disappear when the zoom level is set to anything higher than 100%



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: vertigo on Nov 02, '09 07:58:29AM

Is there a way to make this specific to certain types of content, e.g. Safari RSS feeds only?

I find that the RSS feed's text is too small, but other sites are fine. Would love a way to increase the text size for RSS feeds only.



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: Toadling on Nov 02, '09 12:32:32PM

These selectors modify Safari's default RSS viewer display (using my preferred settings as an example):

.apple-rss-single-line-mode .apple-rss-subject
{
   font-size: 13px !important;
   letter-spacing: 0.06em !important;
}

.apple-rss-multi-line-mode .apple-rss-subject
{
   letter-spacing: 0.06em !important;
}

See this file for more info on available selectors:

/System/Library/Frameworks/PubSub.framework/Versions/A/Resources/PubSubAgent.app/Contents/Resources/Main.css

Hope this helps.

-Dennis



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: vertigo on Nov 03, '09 10:32:02AM

Hrmmm... doesn't work for me for some unknown reason. Thanks for the suggestion, though.



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: jdv on Nov 03, '09 01:33:46PM
You can try this:

.apple-rss-content {
  zoom: 200% !important;
}


It only zooms the content, because I could not get a full page zoom to work properly. You can try replacing ".apple-rss-content" with ".apple-rss-show-unread-mode, .apple-rss-no-unread-mode" and see if you like the results.

[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: vertigo on Nov 06, '09 02:48:44PM

This worked!, although it required a logout to reflect the change. Thanks!



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: alansky on Nov 02, '09 08:20:53AM

Thanks! I have an elderly friend (93 years old) who will benefit greatly from this tip.



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: ToogFilosoof on Nov 02, '09 09:08:31AM

is there a way to only load this zoom-stylesheet when visiting a certain webpage?

thanks in advance

---
Een leeg glas is geen zicht... een vol al evenmin
Powermac G4 [MDD] - 1Ghz - 1,25GB RAM - 10.4.11



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: beepotato on Nov 02, '09 02:05:49PM

You might want to consider using OmniWeb, which has per-site preferences (including zoom level).



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: robogobo on Nov 02, '09 10:47:29AM

Just be prepared to zoom back out if some websites look all wonky.



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: ars on Nov 02, '09 01:08:28PM

If you want to zoom only one page or RRS feed, you can add the zoom button to your Toolbar or zoom in (and out) by using the keyboard (Command + or -). That seems to work fine and should suffice for most people.



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: Jai Gill on Nov 02, '09 03:07:03PM

I just tried this tip and it works great! Just what I was looking for.

However, using it prompts a further request:

Is it possible to adjust the size of the Safari browser window itself?

What happens now is that while the contents of the browser window have been magnified (zoomed), the horizontal scroll bar also appears as the window itself needs to be resized (zoomed) by clicking the green button at the top right of the title bar...

---
JG



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: iynque on Apr 04, '10 04:02:07PM

Try making a new bookmark in the bookmarks bar and change the link to:

javascript:window.resizeTo(1280,960);

Clicking this bookmark will resize the window to 1280x960, but you can easily change those values to whatever you want. I have several presets for standard screen sizes that I use to test website designs.



[ Reply to This | # ]
Also works in Mailplane
Authored by: scooby509 on Nov 03, '09 06:04:41PM

(Mailplane is a dedicated app for Gmail.)



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: DogDutyAscetic on Dec 04, '09 03:32:18PM

Sweet tip. Thanx for taking the time to post it over here for everyone!



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: FreshlyD on Dec 09, '09 01:42:42AM

Hi,

Saw this post and hoping someone may be able to help. Just had a complete shocker with a client who signed-off various designs months ago. The site is nearly built and now he decides he wants to see more of the site on his 1280 x 1200 pc display! ....I'm in a real quandry but hoping some clever coding may be able to set the default zoom to say 70% when you open the browsers. Is it possible to set this in CSS for all browsers? .......and secondly, can you set it so that it detects what display you are running and either runs it or doesn't?

Cheers in advance

JC



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: iynque on Apr 04, '10 04:20:31PM

Okay, this wasn't working at all for me (on Safari 4.0.5), but I found a solution that, for some weird reason, will work:

body {zoom: 130% !important;
zoom: 130% !important;}

I think just having the zoom in there twice will work, but why not throw an "!important" in too, eh? I have no idea WHY it needs to be set twice, but apparently it does.



[ Reply to This | # ]
SafariMagnifier - Safari Extension to set default zoom-in scale
Authored by: fuzu on Oct 18, '10 10:32:51PM

There is a wonderful safari extension, SafariMagnifier, which can set default zoom-in scale for every page.

http://www.wannseii.com/safarimagnifier/



[ Reply to This | # ]
Set default zoom level in Safari using a CSS file
Authored by: Lri on Aug 12, '12 08:03:45AM

This would disable zooming images and videos and reset the zoom level when printing pages.

html {
	zoom: 125%;
}
img, video {
	zoom: 80%;
}
@media print {
	html {
		zoom: 100%;
	}
}


[ Reply to This | # ]