I. Problem Background
This requirement is a bit strange, the best solution for mobile support is to build a dedicated mobile site, server-side does UA detection, returns corresponding content.
P.S. For more information about mobile adaptation solutions, please see [CSS Advanced Part II. How to Support Mobile Browsers](/articles/css 进阶篇/#articleHeader2)
Scenario: PC site is already built, and no plan to change HTML structure, mobile first principle doesn't apply.
P.S. Actually the scenario is CSS specification translation is complete, estimate I'll use mobile to read more in the future, so want to adapt mobile display through media queries. Only adjust layout for mobile devices, media query matching target is mobile devices (here specifically refers to phones, regardless of landscape or portrait)
II. Optional Solutions
1. breakpoints
Most common method, distinguish various devices through screen width (width described in CSS pixels), as follows:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
/* 另外 */
min-width: 480px: Will target mobile devices in landscape mode and up
Above content comes from stackoverflow answer from 2011
Emphasizing 2011 is to provoke thought: phones back then had small screen resolution, and there was no such thing as Retina screen. So, are such media query rules still effective now?
In other words, why can max-width: 480px match large screen phones of 1080x1920px?
The key is that these two px are not the same thing, the former is CSS pixels, the latter is physical pixels. And all phones including iPhone6p and huge screen Samsung, CSS pixel width is between 320px and 480px, of course, the premise of using these query rules is setting viewport meta:
<meta name="viewport" content="width=device-width"/>
Set layout viewport width to CSS pixel width, so no need to worry about ultra-high resolution fighters, as for Retina screen, it has nothing to do with our goal (distinguishing mobile devices). For detailed explanation of three viewports and Retina screen, please see [Fully Understand px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/)
P.S. Moto 360 Watch's CSS pixel width is 218px to 281px, anyway, watches won't exceed 320px, they won't deliberately create chaos.
2. touch events
A clever method, as follows:
<script type="text/javascript">
//detect if browser supports touch
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
$('body').addClass('touchDevice');
}else{
$('body').addClass('notTouch');
};
</script>
Assuming mobile devices === support touch events, there may be compatibility issues, but won't be very serious (like IE, don't want it anyway)
3. Device characteristics
Distinguish devices according to screen width and DPR, for example iPhone6:
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
For query rules corresponding to more devices, please see Media Queries for Standard Devices
P.S. Although this solution cannot solve our problem very well, it can be used to add flowers to brocade (handle specific devices, such as giving Retina screen special treatment)
III. Conclusion
Adopted solution 1 breakpoints, specifically as follows:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Above code comes from CSS Media Queries For Mobile Devices
Actually, from the conclusion alone, we don't need to look for other solutions at all, this simplest method is the most effective.
But the principles involve many things: three viewports, DPR, DPI, CSS pixels, physical pixels, etc.
People who don't understand will definitely have doubts about high-resolution fighters and Retina screens, quoting someone else's answer:
What makes you think media queries won't work?
Apparently, Galaxy S4's CSS pixel ratio is 3.0, therefore, while its physical resolution is 1080x1920, its CSS resolution is still 360x640 - similar to Galaxy S3.
There are also media queries that test for pixel density. They may help you to serve high-res pictures or vector graphics to hi-dpi devices.
http://en.wikipedia.org/wiki/List\_of\_displays\_by\_pixel\_density#Samsung
Plus, take a look at this article:
Awesome database of screen specifications
P.S. English looks more convincing, right, why?
IV. Precautions
When using media queries on CSS specification, found:
微信内置浏览器不支持
@media (min-device-width : 320px)
需要修改 html meta
width=device-width 再用
@media (min-width:480px)
Very obscure problem, so never use min-device-width, seems省事
References
All links are in the text above, additionally, strongly recommend seeing [Fully Understand px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/), guaranteed profit no loss
No comments yet. Be the first to share your thoughts.