Ok, so I’m recoding a site to be responsive but want the site to remain the same until about 500px or so. At the moment I am using max-width: 480px and max-width: 320px and everything is fine, but on the iPad it cuts off the corners (as it should with the stated in the HTML, but I don’t want this). Is there anyway to have browsers ignore the ‘initial-scale=1.0, maximum-scale=1’ until it reaches the 500 or so mark? Or what would be the best way around this?
It’s not totally clear what you are asking here, but I wouldn’t use maximum-scale=1. You can set @media rules for any screen sizes, so just define the settings you want for the iPad—or for any sized screen. E.g.
My right side was being cut off on ipad. min-width had no effect. I added the below and it worked like a charm. That’s a pripratary apple code that all the others picked up too.
Yes, prepretty code like that will reset the layout viewport from the default 980px to 1260px, but it means the desktop layout will be presented as is on the small screen, making the text pretty tiny, which isn’t so nice. That’ why I think the OP is looking for options to reorganize the page on smaller screens (that is, be “responsive”).
Basically, I want the site to be responsive from 480px down (will be 560px as I think that is what the iPhone 5 is in landscape), so the site should look the same on an iPad as it does on a desktop. But using this:
Since you want the site to reflow on the iPhone but not iPad, I recommend you put this in the head of your document, which is a slight variation on what Eric posted:
I have another question, not sure if I should create a new thread though…
Here it is anyway - I’ve seen a few sites recently that have images fall beneath each other when the veiwport scales down, and example is this website - http://footballfashion.org/wordpress/ - just wondering how this is done, nothing urgent, just curious.
So at least with my site I needed the fixed width meta in order to show the whole site and not cut off my footer. Now most likely has to do with the fixed footer. So using the first meta it just zooms in a little basically.
Why would media rules change anything? Full size monitors do not seem to change a bit. So feeding a blanket rule to all seems to be fine. In which case mobiles and such get the rule with or with out media queries in place.
Once you start using @media rules for smaller devices such as iPhone, I find they don’t work properly without <meta name="viewport" content="width=device-width"> in the head of the document. The link I gave above (post #11) explains why it’s needed.
and have @media queries kicking in at @media screen and (max-width: 480px) and all is great. The site is still full width on iPad just like Desktop, and on my Android phone is responsive.