移动端屏幕适配viewport

Posted 2020-07-03

   一般，自适应移动端加这个语句即可

<meta name="viewport" content="width=device-width">
但是，不知道为什么加了这个语句还是没用，查了查可能跟下面这几个元素有关系，所以可以尝试这样子加：

<script>
var viewportContent = ‘‘;
if (window.devicePixelRatio = 1) {
viewportContent = ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi‘;
} else if (window.devicePixelRatio == 2) {
viewportContent = ‘width=device-width, initial-scale=1.0, maximum-scale=1.0‘;
} else if (window.devicePixelRatio == .78) {
viewportContent = ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi‘;
} else if (window.devicePixelRatio == 1.5) {
viewportContent = ‘width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi‘;
}
$(‘head‘).append(‘<meta name="viewport" content="‘ + viewportContent + ‘">‘);
</script>

• css像素
  • html中度量的单位 用px来计算，在pc中往往 1 css px ＝ 1 物理像素
  • css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是320*480 即 css 1px ＝ 1个物理像素；iphone4 分辨率640x960但屏幕尺寸没有改变，意味着同一块区域像素多了1倍 即 css 1px ＝2个物理像素；
• 物理像素
  • 表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像
• 分辨率
  • 显示器所能显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多
• devicePixelRatio
  • window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2个物理像素
  • devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的

  • 其他一些系统、设备

    1. iOS
    类似的，无视网膜设备devicePixelRatio值为1，视网膜设备为2. 因为实际的像素个数是双倍。不过，iphone似乎不愿意改变大家都熟知习惯的320像素宽度布局，没有把设备宽度一下子变成640像素，因此，dips宽度依然是320, 于是devicePixelRatio就是640/320 = 2.

    ios上的情况要相对简单些，除了1就是2. 在其他平台也基本上很简单，因为一般分辨率都比较挫，devicePixelRatio都是1.

    2. Android
    据我所知，谷歌的Nexus One是第一个使用dips的，比iphone还早。同时Galaxy Nexus以及Galaxy Note都是类运动视网膜显示器。近距离探究这三个设备应该会有所收获。

    Nexus One分辨率是480*800, 为了最优的页面浏览，android WebKit团队决定纵向手持时候的宽度依然是320像素，因此，devicePixelRatio值为480/320 = 1.5.
    在同一手机上，Opera Mobile有相同的结论，dips为320宽，devicePixelRatio也是1.5 .

    顺便提一下，BlackBerry Torch 9810(OS7)物理像素同样480像素，BlackBerry WebKit团队决定坚持devicePixelRatio为1. 这可能是更不错的做法，在Torch显示器上480px宽度站点或多或少有些难以阅读。

    Galaxy Nexus有像素的提升，为720×1200. Android团队决定提高dips层的宽度到360像素。从而使devicePixelRatio为720/360 = 2. Chrome团队决定跟进，就如腾讯QQ浏览器所做的那样。

    然而，Opera，坚持自我，dips宽度为320px, 于是devicePixelRatio为720/320 = 2.25. 不过似乎还与zoom缩放层级有关。

    Galaxy Note物理像素为800×1200. 这里所有浏览器都决定使用与Galaxy Nexus一样的比率：Android WebKit, Chrome, 以及QQ都是2，也就意味着其dips宽度为400px. 然而，Opera依然一意孤行2.25, 于是其dips宽度值有些怪怪的: 356px.

    Android标准似乎不严格，于是自家人玩自家人的游戏，对于开发者而言，可能又会面临苦逼~~

    3. 视网膜MacBook
    新的MacBook采用视网膜显示屏，其devicePixelRatio是（如果不出意外）2. 视网膜MacBook的物理像素是2800×1800，而显示出分辨率为1400×900，如果把分辨率作为dips层，则devicePixelRatio为2应该是无误的。

    需要指出的是，如果你把分辨率改成1920×1200，devicePixelRatio依然是2. 严格来讲，这是不准确的，应该是1.5, 然而你也可以说MacBook的分辨率不同于dips层，这种情况下devicePixelRatio在台式机/笔记本下的定义就不一样（哪一个？不知道。）。

    在任何情况下，根据苹果的规范做法，devicePixelRatio值只可能是1或者2. 如果你看到2，你要提供视网膜优化显示图片，如果是1，使用正常的图片——（这里内容其实属于视网膜站点的开发内容）。

  • 结论

    1. devicePixelRatio在大多数浏览器是值得信赖的。
    2. 在iOS设备，screen.width乘以devicePixelRatio得到的是物理像素值。
    3. 在Android以及Windows Phone设备，screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。
• layout viewport
  • 移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的
  • document.documenElement.clientWidth 获取
  • 该尺寸时动态设置
• visual viewport
  • 代表浏览器窗口的尺寸，当用户放大浏览器时这个尺寸就会变小
  • window.innerWidth 获取
• ideal viewport
  • 屏幕尺寸 设备屏幕的尺寸 单位是物理像素
  • screen.width 获取 屏幕尺寸是不变的
  • 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
  • 设置移动端网站一般以这个viewport为准,ideal viewport 的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。