initial-scale=2 bug

Hi all!

I've been working a little on my portfolio site http://www.robertnorgren.com/

To target mobile I've used the line "<meta name="viewport" content="width=device-width, initial-scale=2">". But, when I enter the site on mobile everything's really big until snapping to the expected smaller type.

Is there a way to have it load the correct smaller type instantly, or is there another fix you'd recommend?

Any ideas? Much appreciated.

 

Try this instead:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">

Code (markup):

 

Yeah, setting it to two is a REALLY bad idea. What @qwikad.com suggested is better, though I suggest NOT screwing with minimum-scale, and user-scalable="yes" is the default behavior so...

Also, when rotated to portrait some Android devices report their device-height as width, so I suggest:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

Code (markup):

I don't know who suggested an initial-scale=2, but that's, well... going to do pretty much what you described. Only thing I can figure is there are deeper rooted issues in your layout like some artists under the DELUSION they know what design is -- or front-end coder not qualified to write HTML/CSS -- or a combination of the two -- went and declared all your flow text and elements in 'px' instead of the more accessible 'em' measurement.

Though beware that as of recent changes to OSX, you know have a decision to make over whether to say "screw retina display laptop/desktop users" or "screw Android HDX display users" in regards to font scaling. Fun times.