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.
Related
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...
after visiting a website for a long time, and leaving another open during that time, it seems that the layout of the first, appears on the second. It happens mainly when using chrome, but once the issue appears on chrome, it is as if it stays in memory, and happens in firefox too. I read about memory leaks, but I am not sure that this is the issue, and if I am the only one that has it. I mainly see it happening on the website that I am working on which is why it is an issue, but it happens on the black bars of facebook, and another website called jeuxvideo.com . (This is the template my website uses: http://themes.alessioatzeni.com/html/brushed/).
Here is an image showing the issue, where the layout of youtube overlays another website (the transparent grid you can see over the rest of the website):
http://i.imgur.com/FQW7Jin.jpg
Is this a bug with chrome? Because I have looked everywhere and it doesn't seem that anyone else has this issue, or maybe it is just my computer?
This is probably image persistence, where the colours in the monitor get "stuck" temporarily after being on or off for a long time. The fix would be to upgrade the monitor.
You could confirm this by taking a screenshot while the problem is happening. If you don't see it in the screen shot (try moving the screenshot around the monitor when you see the problem, do the affected areas of the screen move too? or are the artefacts stuck in place?) then the problem is with the hardware.
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'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.
I am building a new site, and I have a folder on desktop with everything in it. For testing basically I open the index page in a browser and preview that way while building it. It looked correct in firefox, safari, chrome and opera on my mac. I uploaded that file to the server, and now firefox on mac displays everything much smaller. Like all size decreased by 200px in width and fonts got small too. The other mac browser show it fine.
I had 4 style sheets at first, a main one then separate ones for other pieces, I combined all into one still no change. Initially I reset font to 100% and then set a base font of 62.5% and adjusted sizes with em's. Someone said that could be culprit so I tried changing to pixel values. No change.
Any idea what I can check why it only changes in one?
Thank you.
Is it possible that you just changed the zoom on the browser?
Reset it in view->zoom->reset
The web version could be cached. Try deleting it!
Make sure that the off-line local copy is still in the same condition as you left it. Then delete all the uploaded files from your webserver, and replace them with the desktop files.
There's a chance that, as Fiarr suggested, your browser is doing something weird with the cache, so ctrl+F5 to deal with that. Goog's suggestion of the zoom being different for your online site is probably the best, but, just to be sure, use Firebug to see what's happening and where the crazy-styling is coming from.
Failing that, you might consider posting a link to your site so that we can see what's actually happening, rather than guessing.