h5里viewport设置

简介:

正确设置:

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

即窗口的大小是设备物理宽度(分辨率 / devicePixelRatio),并且禁止缩放。两者一起使用。width设置浏览器可视宽度,initial-scale设置可视区域缩放级别。注意中间是逗号分隔。若写成分号则后面的无效。

content属性值 :

width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
      maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放,no 禁止缩放

当页面单位用了reminitial-scale必须为1.0,不设置或者设置不正确导致rem渲染不正常。

目录
相关文章
|
4月前
|
前端开发 iOS开发
viewport 的基本原理以及使用
viewport 的基本原理以及使用
|
前端开发 开发者 容器
准备-viewport-定义 |学习笔记
快速学习 准备-viewport-定义
66 0
|
前端开发 开发者
准备 -viewport- 标准化设置|学习笔记
快速学习 准备-viewport-标准化设置
72 0
|
前端开发
css:viewport解决@media媒体查询不生效
css:viewport解决@media媒体查询不生效
200 0
css:viewport解决@media媒体查询不生效
|
Android开发 容器
Horizontal viewport was given unbounded height.width.
Horizontal viewport was given unbounded height.width.
229 0
|
编解码 iOS开发
meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用
meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用
541 0
|
前端开发 Windows
【BootStrap】<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明
【BootStrap】<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明
188 0
【BootStrap】<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明
|
Web App开发 前端开发
meta 之 viewport
移动网页开发涉及到 viewport,随意一篇,分享一下。 常用的 viewport meta 如下:     1     1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(...
668 0
|
Web App开发 编解码 搜索推荐
常用的meta标签总结
一、什么是标签 meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
1356 0