css media query to handle new high resolution mobi

2020-03-24 08:29发布

According to my research; new smart phones portrait resolution is up to 800px
tablets miniumum portrait resolution 600px

Now I'm trying to use media queries to render mobile css to handheld devices supporting resolutions up to 800px but the problem I'm having is older tablets like the ipad1 with a 768px portrait resolution are also rendering the mobile css.

I need to ensure that tablets + desktop pcs from 600px and higher render the widescreen css whilst mobile phones with a max portrait resolution of 800px render the mobile css.

How can I do this despite the crossover of mobile & tablet widths?

this is my current setup...

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,
user-scalable=0,width=device-width" />
<link rel="stylesheet" media="screen and (max-device-width: 800px)" 
href="/css/mobile.css" />
<link rel="stylesheet" media="screen and (min-device-width: 600px)"
href="/css/widescreen.css" />

thanks in advance Omar.

UPDATE:

the following 2 in 1 media query seems to fit my purpose. I've tested on samsung galaxy s2, google nexus and iphone4 and it seems to be working fine. need to verify tablets.

<link rel="stylesheet" type="text/css" media='only screen and (max-width:480px) and    
(orientation: portrait), only screen and (max-width:800px) and (orientation:  
landscape)' href="mobile.css" />

1条回答
家丑人穷心不美
2楼-- · 2020-03-24 09:26

I think the philosophy you're trying to base your media queries on is flawed from the start: As quoted often by Ethan (the "inventor" of the technique) breakpoints shouldn't derive from screen/device sizes but from how the content fits naturally to the page. Start building mobile-first with basic styles for typography and color, then as your screen grows, use min-width:500px (for example) to add some layout/columns, and keep going until you think you take advantage of the available space in desktop wide 22inch resolutions like 1900px and above. I did that for my blog ( http://www.gplus.gr/blog ) - developed only with Chrome in Desktop, and when went to check the website in other devices it worked like a charm: Android 2.x , Android 4.x , Kindle, iPad etc etc..

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

查看更多
登录 后发表回答