Before start using CSS3 Media Queries make sure mobile devices are not resizing your sceen
I got stated optimizing for mobile devices a web app I’m working on using CSS3 Media Queries, and while I was able to change the layout, color and so forth, it was driving me crazy the fact that the devices where resizing the browser screen to the standard desktop size, making the layout seem tiny.
Then I found out the missing piece:
Mobile devices assume your website is optimized for desktop computer unless you tell them otherwise.
10 Tips for Designing Mobile Websites | By Keen Street
To avoid this is necessary to use a meta tag on the header section of the HTML page to set the with of your webpage to the with of the device display:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes” />
More about this and nother “must-know” things when designing mobile devices here: 10 Tips for Designing Mobile Websites. Thanks Keen!
Notes
-
adrifolio posted this
