On 6/14/2013 9:14 PM, weblist99 wrote:
I'm running into a chaos with responsive design targeting many devices. The
main issue is with different resolutions for smart phone.
A year ago below sizes works fine.
• 320 px Mobile portrait
• 480 px Mobile landscape
• 600 px Small tablet
• 768 px Tablet portrait
• 1024 px Tablet landscape/Netbook
• 1280 px & greater — Desktop
But now we have smart phones with these sizes:
• 480 px Mobile portrait (goodbye 320px!)
• 720 px Mobile landscape (Samsung Galaxy S2 for example)
• 780 px Mobile landscape (Samsung Galaxy S3 I think)
• 800 px Mobile landscape (quite many phones are with this size)
My media queries for tablets and phones are:
@media only screen and (max-width:800px)
@media only screen and (max-width:720px)
@media only screen and (max-width:600px)
@media only screen and (max-width:480px)
If your site requires more than a couple of media queries, there could
be a benefit in re-thinking the layout. In may cases, a single
structural query for smartphones is all that's really necessary. If you
use a viewport meta tag in this way:
<meta name="viewport" content="width=device-width">
Then this might be all you need:
@media only screen and (min-width: 0px) and (max-width: 700px)
It would help if you posted a link to your page as media queries are not
strictly theoretical ;-)
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
