Mobile 正确查询屏幕宽度和设备分辨率

也许有人能帮我弄点东西

我基本上是想了解这个设备维度列表，了解如何正确设置查询，甚至可能通过javascript检测和加载资源

最让我讨厌的是那些PPI非常高的设备，比如iPhone和iPad

例如，第一代和第二代iPad的纵向分辨率为768 x 1024。新款iPad Mini也是如此。所以假设查询只使用min-width-768，它将为每个设备加载完全相同的CSS，即使Mini更小，对吗

---

iPad3的图像为1536x2048。所以，只使用最小宽度的查询，这个设备基本上会得到一个大的浏览器布局吗？元视口标记中的比例因子起作用吗？查询是否需要考虑像素纵横比，以便正确地为高分辨率设备提供样式

---

有没有人有一套设备分辨率高的装置

你的问题经过深思熟虑

如今，设备报告的设备像素宽度不准确。像素不再意味着像素，例如，iPad mini比实际的iPad小40%，但它报告的宽度为常规尺寸。加上视网膜设备是200万像素。使用基于px的媒体查询将在这些设备上产生非常非常小的设计

为了避免这种情况，我使用了基于em的媒体查询。然后仅在容器（或ems）上使用百分比。媒体查询的EMS基于16px。您可以在字体大小上使用像素，或者在px回退中使用REM（如果您需要支持IE8）。Respond.js（适用于ie8）支持ems

至于何时为不同的设备启用JS，请明确地将宽度基于ems（默认为px）。我个人尝试对所有大小使用相同的脚本，或者我使用php类和服务器端的东西专门为手机而不是台式机加载，等等，或者我检测触摸和不触摸（见下文）

我已经采取了引导3少文件，改变了变量，使网格使用百分比为排水沟和所有媒体是ems。所有字体都是带有px回退的REMS。html基本字体大小已更改为100%。该框架是开箱即用的移动优先和流体（除了我在变量中更改的巨大排水沟）。它有容易纠正的排版问题。我还删除了所有.container类，只使用一个.container样式，最大宽度和最小宽度不超过屏幕的90%

这些都是基于Bootstrap的变量，但本质上，当您在媒体查询和流体设计技术以及mobile first css中使用所有容器和ems的百分比时，您就涵盖了设备的范围。

这些是ems I目标，在所有设备上都有出色的效果，因为它是视口而不是像素：

// Extra small screen / phone
@screen-xs-min: 480px;
@screen-xs-min: 30.000em;

// Small screen / tablet
@screen-sm-min: 768px;
@screen-sm-min: 48.000em;

// Medium screen / desktop   
@screen-md-min: 992px;
@screen-md-min: 62.000em;

// Large screen / wide desktop
@screen-lg-min: 1200px;
@screen-lg-min: 75.000em;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (47.938em);
@screen-sm-max: (61.938em);
@screen-md-max: (74.938em);

检测功能而不是设备 我使用一个小脚本检测触摸和不触摸，并通过以下方式加载或不加载脚本：

 /* __________________ Supports Touch __________________*/
 /* Detects touch support and adds appropriate classes to html and returns a JS object
 *  Copyright (c) 2013 Izilla Partners Pty Ltd
 *  http://www.izilla.com.au
 *  Licensed under the MIT license
 *  https://coderwall.com/p/egbgdw
 */
var html = document.documentElement,
   supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if (supportsTouch)
   html.className += ' touch';
else
   html.className += ' no-touch';
}

示例

 if( $("html").hasClass("no-touch") ) { 

  $(document).ready(function () {
    $('a[href^=tel]').css('pointer-events', 'none');
  });

 } // end turn off pointer events

---

我以同样的方式使用Modernizer，如果浏览器支持某些功能或不支持某些功能，我将使用它来加载或不加载脚本以及为CSS创建回退

“iPad3的图像为1536x2048。所以，只使用最小宽度的查询，这个设备基本上会得到一个大的浏览器布局吗？元视口标记中的比例因子起作用吗？查询是否也需要考虑像素纵横比，才能正确地为高分辨率设备提供样式？”这将是任意宽度的屏幕大小。这就是为什么现在许多框架和谷歌、Facebook、Twitter使用点击菜单的原因，因为触摸屏上不存在鼠标悬停。