正文

懒人必备的移动端定宽网页适配方案

茹孟凯  茹孟凯  2022-09-09  706

关键词：

如今移动设备的分辨率纷繁复杂。以前仅仅是安卓机拥有各种各样的适配问题，如今 iPhone 也拥有了三种主流的分辨率，而未来的 iPhone 7 可能又会玩出什么新花样。如何以不变应万变，用简简单单的几行代码就能支持种类繁多的屏幕分辨率呢？今天就给大家介绍一种懒人必备的移动端定宽网页适配方法。

首先看看下面这行代码：

<meta name="viewport" content="width=device-width, user-scalabel=no">

有过移动端开发经验的同学是不是对上面这句代码非常熟悉？它可能最常见的响应式设计的 viewport 设置之一，而我今天介绍的这种方法也是利用了 meta 标签设置 viewport 来支持大部分的移动端屏幕分辨率。

目标

仅仅通过配置 <meta name="viewport"> 使得移动端网站只需要按照固定的宽度设计并实现，就能在任何主流的移动设备上都能看到符合设计稿的页面，包括 Android 4+、iPhone 4+。

测试设备

三星 Note II (Android 4.1.2) - 真机
三星 Note III (Android 4.4.4 - API 19) - Genymotion 虚拟机
iPhone 6 (iOS 9.1) - 真机

iPhone

iPhone 的适配比较简单，只需要设置 width 即可。比如：

<!-- for iPhone -->
<meta name="viewport" content="width=320, user-scalable=no" />

这样你的页面在所有的 iPhone 上，无论是宽 375 像素的 iPhone 6 还是宽 414 像素的 iPhone 6 plus，都能显示出定宽 320 像素的页面。

Android

Android 上的适配被戏称为移动端的 IE，确实存在着很多兼容性问题。Android 以 4.4 版本为一个分水岭，首先说一说相对好处理的 Android 4.4+

Android 4.4+

为了兼容性考虑，Android 4.4 以上抛弃了 target-densitydpi 属性，它只会在 Android 设备上生效。如果对这个被废弃的属性感兴趣，可以看看下面这两个链接：

我们可以像在 iPhone 上那样设置 width=320 以达到我们想要的 320px 定宽的页面设计。

<!-- for Android 4.4+ -->
<meta name="viewport" content="width=320, user-scalable=no" />

Android 4.0 ~ 4.3

作为 Android 相对较老的版本，它对 meta 中的 width 属性支持得比较糟糕。以三星 Note II 为例，它的 device-width 是 360px。如果设置 viewport 中的 width (以下简称 vWidth ) 为小于等于 360 的值，则不会有任何作用；而设置 vWidth 为大于 360 的值，也不会使画面产生缩放，而是出现了横向滚动条。

想要对 Android 4.0 ~ 4.3 进行支持，还是不得不借助于页面缩放，以及那个被废除的属性：target-densitydpi。

target-densitydpi

target-densitydpi 一共有四种取值：low-dpi (0.75), medium-dpi (1.0), high-dpi (1.5), device-dpi。在 Android 4.0+ 的设备中，device-dpi 一般都是 2.0。我使用手头上的三星 Note II 设备 (Android 4.1.2) 进行了一系列实验，得到了下面这张表格：

target-densitydpi	viewport: width	body width	屏幕可视范围宽度
low-dpi (0.75)	vWidth <= 320	270	270
	vWidth > 320	vWidth*	270
medium-dpi (1.0)	vWidth <= 360	360	360
	vWidth > 360	vWidth*	360
high-dpi (1.5)	vWidth <= 320	540	540
	320 < vWidth <= 540	vWidth*	vWidth*
	vWidth > 540	vWidth*	540
device-dpi (2.0)**	vWidth <= 320	720	720
	320 < vWidth <= 720	vWidth*	vWidth*
	vWidth > 720	vWidth*	720

vWidth*：指的是与 viewport 中设置的 width 的值相同。
device-dpi (2.0)**：在 Android 4.0+ 的设备中，device-dpi 一般都是 2.0。

首先可以看到 320px 是个特别诡异的临界值，低于这个临界值后就会发生超出我们预期的事情。综合考虑下来，还是采用 target-densitydpi = device-dpi 这一取值。如果你想要以 320px 作为页面的宽度的话，我建议你针对安卓 4.4 以下的版本设置 width=321。

如果 body 的宽度超过屏幕可视范围的宽度，就会出现水平的滚动条。这并不是我们期望的结果，所以我们还要用到缩放属性 initial-scale。计算公式如下：

Scale = deviceWidth / vWidth

这样的计算式不得不使用 JS 来实现，最终我们就能得到适配 Android 4.0 ~ 4.3 定宽的代码：

var match,
    scale,
    TARGET_WIDTH = 320;

if (match = navigator.userAgent.match(/Android (d+.d+)/)) {
    if (parseFloat(match[1]) < 4.4) {
        if (TARGET_WIDTH == 320) TARGET_WIDTH++;
        var scale = window.screen.width / TARGET_WIDTH;
        document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘, ‘width=‘ + TARGET_WIDTH + ‘, initial-scale = ‘ + scale + ‘, target-densitydpi=device-dpi‘);
    }
}

其中，TARGET_WIDTH 就是你所期望的宽度，注意这段代码仅在 320-720px 之间有效哦。

缩放中的坑

如果是 iPhone 或者 Android 4.4+ 的机器，在使用 scale 相关的属性时要非常谨慎，包括 initial-scale, maximum-scale 和 minimum-scale。要么保证 Scale = deviceWidth / vWidth，要么就尽量不用。来看一个例子：

技术分享

在缩放比不能保证的情况下，即使设置同样的 width 和 initial-scale 后，两者的表现也是不一致。具体两种机型采用的策略如何我还没有探索出来，有兴趣的同学可以研究看看。最省事的办法就是在 iPhone 和 Android 4.4+ 上不设置 scale 相关的属性。

总结

结合上面所有的分析，你可以通过下面这段 JS 代码来对所有 iPhone 和 Android 4+ 的手机屏幕进行适配：

var match,
    scale,
    TARGET_WIDTH = 320;

if (match = navigator.userAgent.match(/Android (d+.d+)/)) {
    if (parseFloat(match[1]) < 4.4) {
        if (TARGET_WIDTH == 320) TARGET_WIDTH++;
        var scale = window.screen.width / TARGET_WIDTH;
        document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘, ‘width=‘ + TARGET_WIDTH + ‘, initial-scale = ‘ + scale + ‘, target-densitydpi=device-dpi‘);
    }
} else {
    document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘, ‘width=‘ + TARGET_WIDTH);
}

如果你不希望你的页面被用户手动缩放，你还可以加上 user-scalable=no。不过需要注意的是，这个属性在部分安卓机型上是无效的哦。

其他参考资料

附录 - 测试页面

有兴趣的同学可以拿这个测试页面来测测自己的手机，别忘了改 viewport 哦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=250, initial-scale=1.5, user-scalable=no">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        div {
            background: #000;
            color: #fff;
            font-size: 30px;
            text-align: center;
        }

        .block {
            height: 50px;
            border-bottom: 4px solid #ccc;
        }

        #first  { width: 100px; }
        #second { width: 200px; }
        #third  { width: 300px; }
        #fourth { width: 320px; }
        #log { font-size: 16px; }
    </style>
</head>
<body>
    <div id="first" class="block">100px</div>
    <div id="second" class="block">200px</div>
    <div id="third" class="block">300px</div>
    <div id="fourth" class="block">320px</div>
    <div id="log"></div>
    <script>
        function log(content) {
            var logContainer = document.getElementById(‘log‘);
            var p = document.createElement(‘p‘);
            p.textContent = content;
            logContainer.appendChild(p);
        }

        log(‘body width:‘ + document.body.clientWidth)
        log(document.querySelector(‘[name="viewport"]‘).content)
    </script>
</body>
</html>

本文的版权归作者邹润阳所有，采用 Attribution-NonCommercial 3.0 License。任何人可以进行转载、分享，但不可在未经允许的情况下用于商业用途；转载请注明出处。感谢配合！

移动端h5网页开发必备知识(代码片段)

...事必先利其器，今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇总移动端开发必备知... 查看详情

手淘h5移动端适配方案flexible源码分析(代码片段)

移动端适配一直是一个值得探讨的问题，在业余时间我找了一些页面，查看了一些厂商对于移动端H5页面的适配方案，看到了几个典型的例子，今天就来记录一下我看到的第一个典型的例子，也是我们公司目前普通H5项目正在使... 查看详情

html移动端适配方案rem

为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头... 查看详情

window桌面自动整理文档工具（懒人必备)

1使用目的习惯性将文档放在桌面上，然后，长时间下来桌面就变得异常的杂乱，又不想一个一个去归类，就想找一个工具能够自动归类的，于是，就发现了Droplt这个工具。2工具介绍官方地址****：http://www.dropitproject.com/什么是Drop... 查看详情

css手机适配

(转)移动站适配rel=alternatepc页和h5页适配标注(代码片段)

转自 https://www.cnblogs.com/osfipin/p/5852037.html 鉴于移动化大潮的汹涌和H5页的炫丽普及，百度针对PC页与H5页的跳转适配方式推出了最优方案：1.在pc版网页上，添加指向对应移动版网址的特殊链接rel="alternate"标记，这有助于百... 查看详情

08-移动端开发教程-移动端适配方案

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情

window桌面自动整理文档工具（懒人必备)

rem,vw,还是...?各凭本事的移动端适配方案(代码片段)

...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情

移动端屏幕适配解决方案

　　因原在做移动端适配过程中，一直都是应用淘宝的flexible高清方案解决，也没有认真的去研究过源码。这几天又看到一些普通的适配方案，于是把两者源码放在一起比较，发现高清方案是通过动态的获取了当前设备的dpr值，... 查看详情

懒人必备的osboxes！

关于Linux的学习，请参考书籍《Linux就该这么学》相信有很多想切换到Linux的朋友，又怕使用上不习惯，或者因为某些原因不能在主力电脑上安装Linux系统。又有的朋友感觉Linux发行版太多，不知道哪款才适合自己，也不太可能在... 查看详情

移动端适配方案-rem(基础篇)

　　　　常见移动web适配方案一般有3种方法，如下图：　　　　　　①：定高，宽度百分比（百分比适配简单，一般用来做一些适配性不高的页面，比如只有一些文字和图片等简单的屏幕适配）　　　　②：flex（更多的用于复... 查看详情

探究移动端开发

探究移动端开发　　什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。第一部分：基本概念　　物理像素... 查看详情

移动端前端适配方案20170707

1.MeidaQueriesmeidaqueries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：@mediascreenand(max-width:600px){/*当屏幕尺寸小于600px时，应用下面的CSS... 查看详情

认识移动端开发

　　认识移动端开发　　什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。而当今比较流行的通过rem进行移动端的适配，所以这篇文章会主要介绍一些基本概念以及rem适配方案。第一部分：基本概念　　物理像素... 查看详情

原创移动端高清多屏适配方案

移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情

移动端开发适配的2中方案(代码片段)

原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html针对移动端适配的方案~一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：htmlfont-size:100px;@media(min-width:320px)htmlfont-size:10... 查看详情

移动端页面适配方案及原理(代码片段)

最近要接一个移动端的需求。类似歌曲排行榜的H5页。本人未雨绸缪，学习一波移动端适配方案。0.移动端vsPC端区别1.页面的三个视窗和缩放1.1layoutviewport和visualviewport:1.2idealviewport:1.3页面的缩放2.移动端适配2.1使用meta标签控... 查看详情