6

I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.

I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.

What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.

Could anyone post some tips or hints as to way this is happening?

EDIT:

I've fixed the problem with

zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;

And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?

Scott Stensland
  • 26,870
  • 12
  • 93
  • 104
Mario Legenda
  • 749
  • 1
  • 11
  • 24
  • 2
    "Default Chrome zoom level is 75%"...no, it's not. – Paulie_D Sep 14 '14 at 12:38
  • Oh yea, you are right. I made that assumption thinking that Firefox is at 100%. Since app looks smaller in Chrome, i thaught it's 75%. Do you know how to fix that? Maybe an article? I looked trough google but couldn't find anything or didn't look the right way – Mario Legenda Sep 14 '14 at 12:43
  • Not seeing a difference in Chrome to FF – Paulie_D Sep 14 '14 at 13:46
  • I had to clear the cache and site preferences to Firefox and Chrome to see it. – Mario Legenda Sep 14 '14 at 13:52
  • I would have no cache on a first visit so I still cannot reproduce the issue. – Paulie_D Sep 14 '14 at 13:58
  • I don't know what to say. I called two friends who use only firefox. They installed Chrome and the see it as I see it. Also, zoom is set to default 100% in all browsers. Webkit browsers are smaller and Firefox is bigger. I don't get it. I solved it using this link http://stackoverflow.com/questions/9441557/how-to-increase-browser-zoom-level-on-page-load but the answer says is a bad fix since the same results can be made with using proper css techniques but I don't know them – Mario Legenda Sep 14 '14 at 14:05
  • There is a setting in Chrome which allows you to set the default zoom for individual sites... settings > Privacy > content settings > zoom levels > manage... Just do a search in Google Chrome Settings for zoom and it's at the bottom of the content settings modal – ea0723 Nov 10 '15 at 03:00

3 Answers3

2

I've had this issue as well. Using the @viewport tag works well. Here are the articles that I used to resolve the issues:

There are a lot of similar questions with suggestions. Here's one that helped me:

Community
  • 1
  • 1
ea0723
  • 805
  • 11
  • 25
1

Here is your Answers......

For Firefox :

  1. open up a new tab, and type about:config into the address bar, and press enter.

  2. Then use the search box, enter the word "pixel" then it will show "layout.css.devPixelsPerPx".

  3. change the value -1.0 to 1 for 100% perfect scale...

For Chrome:

  1. Right Click the chrome icon or chrome shortcut icon, go to the properties.

  2. Then in the "Target:" field, Click the field and press end button.

  3. Now you are seen this "chrome.exe" at the end.

  4. copy this text : chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1

    and paste on chrome.exe"

  5. Then Restart chrome or close the browser and double click the shortcut icon.

Community
  • 1
  • 1
jsjq-finder
  • 165
  • 3
  • 15
0

The reason for the difference is because Firefox uses the system zoomlevel. Which is set at 125% by default on Windows. Whereas Chrome uses a default level of 100%.

I would advise to design for Chrome, because then the text will always be readable.

Sebastian
  • 3
  • 2