Initial-scale=1.0, maximum-scale=1

Mobile
1

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?

Thanks.
Al.

2

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.

@media only screen and (max-width: 500px) {

}
3

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.

<meta name=“viewport” content=“width=1260”>

4

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”).

5

Thanks for the replies.

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:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

in the HTML causes the iPad to cut off each side and scale to the width of the viewport of the iPad.

So the real question is, how do I get the ‘scale’ to not affect the iPad?

Thanks

*Eric will that make the site look the same on iPad and Desktop?

6

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:

<meta name="viewport" content="width=device-width">

If you set a fixed value in place of “device-width”, it might mess up the iPhone layout.

7

Cheers for that ralph, seems like you answer all my questions. I don’t have an iPad with me right now, but will check when I get my hands on it later.

8

What’s that one do Ralph?

9

This site explains it well http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

I still don’t really get it though. Ill have to test to fully understand.

10

Thanks for that Eric.

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.

Thanks.

11

It’s a messy area, indeed, and I haven’t found anyone who can really explain it properly, but this is one of the better explanations:

To get that kind of effect, you need JavaScript. Something like

http://www.wookmark.com/jquery-plugin

12

meta content="width=device-width debunked.

With

<meta name="viewport" content="width=device-width">

or nothing added

1024×768 132 KB

1024×768 152 KB

With

<meta name="viewport" content="width=1260">

1024×768 127 KB

1024×768 78 KB

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.

13

width=device-width really seems to be useful only if you have @media rules at play.

14

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.

15

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.

16

Hey again guys, I’m using this

<meta name="viewport" content="width=device-width" />

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.

So all worked out for me.
Thanks!

17

Glad it’s working. Thanks for the feedback. :slight_smile: