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)
Between 800px, 768px (e.g., iPad portrait) I am running into issue, for
example, in 768px for tablets I need to target floated elements, and then
between 480 to 800px for smart phones regardless of portrait and landscape
no float element (or 2 columns using inline/inline-block) is needed.
Also, between tablet (Kindle Fire) that has the size of 600px is also
creating similar problem between 480px to 720px.
My first thought is to create a stylesheet targeting tablet portrait for
768px, but this is also not reliable because there is also tablet devices
which has 800px for portrait.
Thank you!
Tee
______________________________________________________________________
css-discuss [[email protected]]
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/
