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

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

一、meta

content的属性值：

width：控制 viewport 的大小，width=device-width代表宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=1.0：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

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

这样做会导致的问题：

实现图片预览的时候，无法双指滑动进行放大、缩小，在体验上超别扭；

IOS端适配的问题(DPI)(没有IOS，因此没测试，可能是最初的iphone屏幕才会出现适配的问题吧)

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

//或

二、CSS

利用css的@viewport做适配，但真正做设备适配的代码，不只用到这一个属性。

@viewport可以设置宽度、高度、缩放系数、文档方向等，参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport

代码兼容：

@-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来实现。