I've been working on a site in a MAMP environment and recently uploaded it onto a hosting server to do cross-browser testing and noticed something weird. The page is literally larger -- not that the container has changed pixel size (Chrome's "Inspect Element" says it is 940px wide in both instances) but if I flip between a tab in the local environment and a tab with the server environment, it is literally visually larger. 940px means a larger screen distance on the server, evidently.
Everything seems to be resized to the same ratio so it hasn't affected the layout at all, so I'm not exactly troubled by this, but I am sort of puzzled. Does anyone know why this is happening and if I should be doing anything in particular about it?
Are you sure you haven't "zoomed in" to the page?
Press cmd+0 to make sure you are at 100% zoom level... (I guess it's just ctrl+0 on Windows)
Another reason could be that a monitor has a different resolution...
That is because of different screen-resolutions, or because you have zoomed the chrome-window.
Related
I have website which is having layout issues on certain devices which I believe I've tracked down to high res displays which also have the display scaling in windows 10 set to 200%. (not 200% in the browser, but in the display settings in the Windows Control Panel)
The problem is I don't have a device which can duplicate the resolution of these devices, which is 2736 x 1824 (it's a MS Surface Pro). Oh yeah, this only happen with Edge...
I know of sites which have VMs which will run different browsers for testing purposes, but I don't know of any which allow you to choose your resolution. Without going out and getting a hold of this specific machine, how else can I debug this issue?
You could create a custom device in the developer console, and simply display it at whatever scale actually fits on your screen. For instance, create a custom device with that particular resolution, then in the developer console on Chrome you can view it scaled down 50% (if your own resolution is 1920x1080) so that the whole thing is visible.
Turned out none of the emulation/scaling options in the dev console would emulate what was really happening. I ended up remoting into the customer's computer so I could do my own debugging on there and resolved the issue.
Seems like Edge v 44 was computing some CSS calc function for a div height incorrectly (off by 1 or 2 pixels) which was making some divs push out and mess up the layout.
The fix was to tweak the CSS so the calculation wasn't required.
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...
Similar Question:
Why does my website appear smaller on a live server than when deployed locally?
So I wanted to reask this question, but please don't say there is already a duplicate. I thought the answer of that page is just basic information, and didn't fix my problem.
My question is similar, the same page in my PC renders fine(Firefox, Chrome), but the same one on a server rendered smaller by Firefox(Chrome OK). My local webpage is using the URIfile:/// and I have hosted a page on a free server, of course the URI would then behtml://. That is all I know.
Local: !
Web: !
As you can see, both screen sizes are exactly the same, the CSS is the same, not zoomed in, I suspect it is how Firefox handle px sizes differently, but this is the 1st time happening. Why? How to fix?
Extra Information:
I discovered if I zoom in in Firefox 1 time in the page on the server, it is the same size as the page locally
Is it possible you're zoomed in? Try pressing control + 0 to reset the zoom, or using control + the mousewheel.
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.