Question

也许有人可以为我解释一些事情。

我基本上试图理解这个设备维度列表，如何正确设置查询，甚至可能通过javascript检测和加载资源。 http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

主要让我失望的是具有非常高的PPI的设备，如视网膜Iphone和ipads。

作为示例，第一代和第二代iPad的纵向分辨率为768 x 1024。新的iPad Mini也是如此。因此，假设查询仅使用，例如min-width-768，它将为每个设备加载完全相同的CSS，即使Mini较小，对吧？

iPad 3的肖像为1536 x 2048.因此，仅使用最小宽度查询，这个设备基本上可以提供大型浏览器布局吗？元视口标记中的比例因子是否起作用？查询是否需要考虑像素长宽比以及正确地为高分辨率设备提供样式？

任何人都有一个适用于设备分辨率海洋的设置吗？

Answer 1

您的问题经过深思熟虑。

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

我为避免这种情况所做的是使用基于em的媒体查询。然后只使用容器（或ems）上的百分比。媒体查询的EMS基于16px。您可以在字体大小上使用像素，或者使用带有px后退的REM（如果需要支持，即8）。 Respond.js（对于ie8）支持ems。

至于什么时候为不同的设备引入JS，明确地将您的宽度基于ems（默认为px）。我个人尝试对所有大小使用相同的脚本或者我使用php类和服务器端专门为手机加载而不是桌面等等或者我检测到触摸和非触摸（见下文）。

我已经使用了Bootstrap 3 LESS文件，更改了变量以使网格使用排水沟的百分比，所有媒体都是ems。所有字体都是带有px后备的REMS。 html基本字体大小已更改为100％。框架是开箱即用的移动设备和流体（除了我在变量中改变的巨大的排水沟）。它有排版问题，很容易纠正。我还删除了所有.container类，只使用了一个单独的.container样式，其最大宽度和最小宽度不超过屏幕的90％。

这些基于Bootstrap的变量，但基本上当您在媒体查询和流畅设计技术以及移动优先css上使用所有容器和ems上的百分比时，您将覆盖所有设备。 < / p>

这些是我在所有设备上获得优异效果的ems，因为它是视口而不是像素：

// 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创建回退。

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

1 个答案:

检测功能而不是设备