meta视口标签

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

为了移动端而生的。

标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

二倍图

1. 物理像素 就是我们说的分辨率 iphone8的物理像素是750
2. 在iphone8里面 1px开发像素 = 2个物理像素

物理像素比&物理像素

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好的。比如苹果678是 750*1334
• 我们开发的时候1px不是一定等于1个物理像素的
• pc端1个px等于1个物理像素
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

背景缩放background-size

background-size属性规定背景图像的尺寸
background-size：背景图片宽度 背景图片高度；

• 单位：长度|百分比|cover|contain;
• cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域
• contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

css3盒子模型

box-sizing:border-box;
-webkit-box-sizing:border-box;

点击高亮我们需要清除，设置为transparent 完成透明

-webkit-tap-highlight-color:transparent;

在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance:none;

禁用长按页面时弹出菜单

img,a{
-webkit-touch-callout:none;
}

最后

以上就是淡定飞机为你收集整理的meta视口标签的全部内容，希望文章能够帮你解决meta视口标签所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。