I’ve made a website that is responsive and uses Foundation.
On my PC the layout scales well down below 480px. But on my smartphone (which is supposed to have a 480px x 800px screen) it is squashed and goes off the side of the screen.
For example, there is an image which is 440px wide, but on my smartphone it’s about 30% wider than the screen. It’s not doing anything clever with the css, it’s just a fixed width image.
What’s going on?
Some googling implied it might be viewport related, but I checked and the basic Foundation page layout that it’s based on already includes
Can you snippet the code for the actual image or around it? Just out of curiosity, to make sure there isn’t some easy “oops” mistake of some kind before you spend a lot of time mocking something up.
Ok. I’ve knocked together something to show the issue. I’ve stripped out most of the page and so the styles might not be 100% working. But it should show the basic problem. (which is probably an easy oops mistake).
As you can see, nothing on that page should be more than about 480px wide, yet on my (supposedly 480px wide) phone screen the top boxes get squished together to fit on screen, and the bottom image is about 30% wider than the screen (which would make it about 600px wide).
On my pc, if I shrink the browser window to about 480px it seems to fit ok.
I’m guessing it’s something to do with viewports or something similar. But everything I’ve read about them implies that the correct viewport is already set.
PS/ If I set the viewport width to 480px then it seems to render the top boxes correctly, but the whole page is 30% wider than the screen.
I can pinch-zoom out to make it fit on screen though. But the the foundation topbar menu (not in demo) gets shrunk to be tiny.
There is a horizontal scrollbar appearing at 670px on the desktop which may be confusing the width calculations. You’ve set the media queries in em which means that if the browsers default is 16px then your 40 em kicks in at 641px which doesn’t match your design.
I’m not a fan of em media queries but if you do use them then as Ryan has mentioned you need to code your elements in em also in case the default font-size is different to what you expect.
Notwithstanding my comments above the actual issue is that you are assuming that 480px is the viewport width but that is the resolution of the device. The HTC has a pixel density of 1.5 which means it has a viewport width of 320px (320 x 1.5 = 480) i.e. it crams 480px into 320px space giving a better display.
You need to let your layout scale down to 320px or use pixel density media queries to make the changes where required.
The best course of action is to make all your responsive sites scale down to 320px and just offer better images for the higher density displays where required (if that is an issue).
.