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.