##一.問題の背景
このニーズは少し奇妙です。モバイルサポートの最善策は専用のモバイルサイトを構築し、サーバー側で UA 検出を行い、対応するコンテンツを返すことです
P.S. モバイル适配方案に関する詳細情報は、[CSS 進階篇 二.モバイルブラウザのサポート方法](/articles/css 进阶篇/#articleHeader2) を参照
シーン：PC サイトは既に構築済みで、HTML 構造を変更する予定がないため、mobile first 原則は適用できません
P.S. 実際のシーンは CSS 規範の翻訳が完了し、おそらく今後はスマホで見る機会が多いので、メディアクエリを通じてスマホ表示に适配したいと考えています。モバイルデバイスに対してのみレイアウトを調整し、メディアクエリのマッチング目標はモバイルデバイスです（ここでは特にスマホを指し、横画面縦画面は問いません）
##二.選択可能な方案
###1.breakpoints
最も一般的な方法で、画面幅（CSS ピクセルで記述された幅）を通じて各種デバイスを区別します。以下の通り：
@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
上記の内容は stackwoverflow 2011 年の回答 からの引用です
2011 年を強調したのは思考を誘発するためです：当時の携帯電話の画面解像度は小さく、Retina 画面のようなものもありませんでした。では、現在このようなメディアクエリ規則はまだ有効でしょうか？
言い換えると、なぜ max-width: 480px が 1080x1920px の大型画面携帯電話にマッチするのでしょうか？
鍵はこの 2 つの px が同じものではないことで、前者は CSS ピクセル、後者は物理ピクセルです。iPhone6p および巨大画面サムスンを含むすべての携帯電話の CSS ピクセル幅は 320px から 480px の間にあります。もちろん、これらのクエリ規則を使用する前提は viewport meta を設定することです：
<meta name="viewport" content="width=device-width"/>
レイアウトビューポートの幅を CSS ピクセル幅に設定するので、超高解像度の戦闘機を心配する必要はありません。Retina 画面については、そもそも私たちの目標（モバイルデバイスの区別）とは関係ありません。3 つのビューポートと Retina 画面の詳細な説明については、[完全に理解 px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/) を参照
P.S. Moto 360 Watch の CSS ピクセル幅は 218px から 281px です。总之、時計は 320px を超えることはありません。彼らは故意に混乱を製造することはありません
###2.touch イベント
一種の取巧な方法で、以下の通り：
<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>
モバイルデバイス === touch イベントをサポート と仮定すると、互換性問題が存在する可能性がありますが、深刻ではありません（例えば IE は不要で��構いません）
###3.デバイス特性
画面の幅および DPR を通じて各デバイスを区別します。例えば 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) {
}
より多くのデバイスに対応するクエリ規則は Media Queries for Standard Devices を参照
P.S. この方案は私たちの問題を很好地解決できませんが、錦上添花に使用できます（特定デバイスに対して処理を行う、例えば Retina 画面に特別な待遇を与える）
##三.結論
方案 1 の breakpoints を採用しました。具体的には以下の通り：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
上記のコードは CSS Media Queries For Mobile Devices からの引用です
実際、結論だけから見れば、私たちは他の方案を探す必要は全くありません。この最も簡単な方法が最も効果的です
しかし、原理が関わるものは比較的多いです：3 つのビューポート、DPR、DPI、CSS ピクセル、物理ピクセルなど
不明な人は必ず高解像度戦闘機と Retina 画面に対して心存疑虑を持つでしょう。他人の回答 を引用します：
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. 英語を見る方がより人を信服させやすいですよね。なぜでしょうか？
##四.注意事項
CSS 規範にメディアクエリを使用时发现：
微信内置浏览器不支持
@media (min-device-width : 320px)
需要修改 html meta
width=device-width再用
@media (min-width:480px)
非常に隠晦な問題なので、絶対にmin-device-width を使用しないでください。一見省事に見えますが
###参考資料
すべてリンクは上文にあります。另外、強く [完全に理解 px,dpr,dpi,dip](/articles/完全理解 px-dpr-dpi-dip/) を見ることをお勧めします。確実に得をします
コメントはまだありません