have a webpage that has an image in it. in the CSS, i define the height to be 20% (so it's 80% of the client window) and the width to be auto. This works completely in chrome and FF, and also works in IE when i open the page from my computer's harddrive. however, when i upload the file to my server, and load it remotely, IE fails to adjust the width/height completely. the image is the full size regardless of how big the client window is.
why does this happen? how can i fix it? any tips would be greatly appreciated! the site is http://mikeseese.com
No way to test IE right now, but this may be related to this scenario:
Compatibility Mode is forced on intranet/local sites by default (Go to Tools > Compatibility Mode Settings) so you may get a different Browser Mode on each site. Watch the Developer Toolbar (F12) to see if the mode changes.
Related
I cam across this problem when i started to design websites, they look zoomed in in chrome and edge, but it is okay in firefox.
The same websites looks perfect in my friends chrome browser. So, I must have some config settings inaccurate.
Here are some snapshots--
Look in Firefox--
Look in Chrome--
Look in Edge--
Here is another example--
Look in chrome--
Look in firefox--
here is my display settings--
I am nt able to fgure out how to fix this, Please guide me how to resolve this issue.
Link to my github repo-- Github repo link for calculator
I did not find path in while creating shorcuts as stated in one of the comments--
This comment by #Deepak-MSFT fixed the issue. Votes to him on this.
Try to create a Shortcut for MS Edge and Google Chrome browser. Right-click on it and click on Properties. Go to the Shortcut tab. In the Target, field add /high-dpi-support=1 /force-device-scale-factor=1 after the path. Separate path and parameter with single space. Click on Apply and Close. Launch the browser from the shortcut and see whether it fix this issue or not.
The value of the field should be something like:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-frame-rate-limit /high-dpi-support=1 /force-device-scale-factor=1
Also work if Chrome is launched from the "Run dialog" as:
chrome /high-dpi-support=1 /force-device-scale-factor=1
Had the same problem as you with default font size difference between Chrome and Firefox browsers and it is beacause I increased the font size in Windows 10, looks like Chrome interprets this like a general zoom increase because even the browser look is bigger now, not only the text as I intended.
Seems like a bug on Chrome side, as Firefox behaves normal and increases only the text as set in Windows.
Check the Windows font size in Settings / Ease of access / Display / Make text bigger section - there's a slider there.
My current fix is to set the default general zoom level in Chrome settings to 80%, which is a little smaller than Firefox but acceptable, probably 85% would have been perfect but I cannot set custom values.
As many of you are probably aware, Chrome has an annoying "feature" where it auto adjusts the zoom so the content "fits to window" when you have the Chrome Dev Tools open and the Device Toolbar enabled.
If you change the zoom back to 100% then it changes the width to something that will fit, so you literally can't change either as it forces one of the other back to a setting so it will fit in the window.
Now, I have tried this, this, this and this, none of which work.
I have also recently reinstalled Windows 7 and it still works the same as it did before the reinstall.
I'm running on Windows 7 if that matters.
Is there any other settings that this could probably be to stop it from doing this!?
I have a web page which is displaying much smaller in Chrome than Firefox on Windows. This is on the same screen. According to the Chrome developer tools and Firefug they have essentially the same computed width in pixels.
This screenshot shows both browsers (Firefox at the top/back with Chrome in front of it). I have double-checked that both have zoom level reset to 100%.
I have checked with both browsers in "private" mode in case there was some external plugin causing an issue. My colleague tried on a Mac in Chrome, Firefox and Safari and they were all the same (and more similar to Firefox than Chrome on my machine).
According to the Chrome developer Tools the internal width of the main content area is 951 pixels while according to Firebug the same element has a width of 953 pixels. The difference looks a lot more than two pixels to my eyes!
Any ideas what could be causing this and how to avoid it would be gratefully received.
So I was using Chrome and IE together when all of a sudden Chrome decides to change its zoom level not only for the webpage, but the entire browser. I'm not sure if it happened when I restarted Chrome or if it happened when I decided to bring it to the front. So basically, all menu items, logos, icons, absolutely everything appears to have been zoomed in slightly. I have restored to original settings, disabled extensions (I don't use any extensions anyways), uninstalled and reinstalled, and nothing.
I've used the DPI settings in the properties of the Chrome application and nothing changes it. I've changed scaling in Windows and nothing helps.
Everything is larger in Chrome now and it's driving me crazy. Many menu items won't appear fully because of this. Note that this isn't just at the webpage level but at the entire browser level. I've included some images so you can compare. If you look at the youtube homepage, you'll see that everything is larger in Chrome than it is in Internet Explorer.
Scratch that apparently I need reputation in order to post pictures, ugh. If I can get 10 rep soon I'll post some pics.
I'm sorry if my description is rather vague but this isn't something I could search up. No other programs (including IE) are having this issue. THanks very much in advance if anyone can help. This is just driving me crazy.
No, Ctrl + 0 obviously does not work. This is an issue with the program as the entire program looks zoomed in. Everything, not just the webpage.
Found a "quick fix" solution from post #38 here:
Right click on the Chrome link on your desktop
Choose Properties and then add " /high-dpi-support=1 /force-device-scale-factor=1" to the existing Link to your path to chrome.exe.
Hope this works permanently. What a hassle.
If you're experiencing a "zoomed in" browser it's because you have an updated version of Chrome. Chrome and FireFox now adjusts the page zoom level according to your Windows settings to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25%. This is usually the default setting on your computer.
This means that your updated Chrome and/or FireFox browser will automatically set websites to 125%, and all other browsers remain at 100%.
What are possible solutions?
As of this writing, their isn't a known method of fixing this from a web coding standpoint, due to that it's created from the inner workings of the browser. That being said, their are still some things you can do from the "users" side to fix this:
The quickest way around this is to open up your browser and press on your keyboard "ctrl -" (control minus) twice. This will set your website content to 75%, which would be equivalent to 100% in all other browsers (but this will just fix the website content).
You can set your computers font-size settings in your control panel to "100%". This will make all of your computer fonts smaller.
I'm sure their is a better answer to this, but for now these are the 2 options that I'm seeing. In FireFox version 22 they also added this feature (as mentioned above), you can see the work around for FireFox here: https://support.mozilla.org/en-US/questions/962979
I'm sure a similar solution also exist with Chrome.
You can change your windows default zoom to 100% in display settings and make everything almost unreadable, or (a better way)
You can add a start parameter to your chrome shortcut:
"your-chrome-dir\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1
I know, it's too late, but just in case someone else has this problem...
For an html page, $(window).width() is giving different values when its hosted on server.
My laptop's resolution is 1920 X 1080.
When I open the page locally on Firefox and Chrome, the width is shown as 1920. The same page when I hosted on a server and when its opened, the width is shown as 1097. Why is this difference? Due to this difference the whole layout of the page is different. How I can solve this?
P.S When the page is opened in IE, the width is same on local and server.
I'm using Zurb's foundation framework (3.2).
jS not run into the server window has some property for Width like this
window.outerWidth
window.innerWidth
that change on re size browser screen with get log from window you can see all property in developer tools
console.log(window);
I had the same problem in Google Chrome. Apparently media queries get messed up if the page is zoomed in or out. Make sure your zoom level is 100% for both sites.
I confirm the issue and believe actually nothing (Ubuntu 12.04, Mozilla Firefox 26.0)
http://www.potomek.eu/blog/media/differentscreenwidthissue.jpg