HTML+CSS：viewport的写法，跟图片也有关系

viewport：设备显示网页的那部分区域，在移动端的开发起着至关重要的作用。

一、meta

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

content的属性值：

• width：控制 viewport 的大小，width=device-width代表宽度是设备屏幕的宽度
• initial-scale=1.0：表示初始的缩放比例
• minimum-scale=1.0：表示最小的缩放比例
• maximum-scale=2.0：表示最大的缩放比例
• user-scalable=yes：表示用户是否可以调整缩放比例

首先，不建议禁用缩放，比如下面的写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这样做会导致的问题：

1. 实现图片预览的时候，无法双指滑动进行放大、缩小，在体验上超别扭；
2. IOS端适配的问题（DPI）（没有IOS，因此没测试，可能是最初的iphone屏幕才会出现适配的问题吧）

那么，应该怎样使用呢？一般来说，只设置允许最小的比例是1.0就足够了，具体写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  //或
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5" />

二、CSS

利用css的@viewport做适配，但真正做设备适配的代码，不只用到这一个属性。
@viewport可以设置宽度、高度、缩放系数、文档方向等，参考文档（developer.mozilla.org/......）
代码兼容：

@-webkit-viewport {
        width: device-width;
 }
@-moz-viewport {
        width: device-width;
 }
@-ms-viewport {
        width: device-width;
}
@-o-viewport {
        width: device-width;
 }
@viewport {
        width: device-width;
}

不过，将设备的width设置为device-width，依然建议通过meta来实现。

本文地址：https://blog.csdn.net/yyl262/article/details/107170948