■知识点

在移动Web开发中，经常会遇到viewport (视口)，即浏览器显示页面内容的屏幕区域。一般移动设备的浏览器默认都设置一个标签，定义一个虚拟的布局视口，用于解决早期页面在手机上显示的问题。

iOS、Android基本都将这个视口分辨率设置为980px，所以桌面网页基本能够在手机上呈现，只不过看上去很小，用户可以通过手动缩放网页进行阅读。这种方式用户体验很差，建议使用标签设置视口大小。

标签的设置代码如下：

各属性说明如表所示。属性取值说明

width正整数或device-width定义视口的宽度，单位为像素

height正整数或device-height定义视口的高度，单位为像素，一般不用

initial-scalef0.0-10.01定义初始缩放值

minimum-scale[0.0-10.01定义缩小最小比例，它必须小于或等于maximum-scale设置

maximum-scale[0.0-10.01定义放大最大比例，它必须大于或等于minimum-scale设罝

user-scalableyes/no定义是否允许用户手动缩放页面，默认值为yes

■实例设计

下面示例在页面中输入一个标题和两段文本，如果没有设置文档视口，则在移动设备中所呈现效果如图1.6所示；而设置了文档视口之后，所呈现效果如图所示。

设置文档视口

width=device-width,initial-scale=1

width=device-width将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。

initial-scale=1表示将 layout viewport (布局视口)的宽度设置为 ideal viewport(理想视口)的宽度，

html5 视口,HTML5 定义文档视口相关推荐

HTML5系列代码：section标签定义文档中的节（section、区段）
section标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. HTML 4.01 与 HTML 5 之间的差异 section标签是 HTML 5 中的新标签. ...
HTML5开发APP技术文档
HTML5开发APP技术文档一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: ...
html语言中,定义文档中一个正在打开的链接的颜色的代码是,2017微软认证考试精选练习（附答案）...
2017微软认证考试精选练习(附答案) 1.如果要使图像在缩放时不失真,在图像显示原始大小时,按下( )键,拖动图像右下方的控制点,可以按比例调整图像大小 B A. Ctrl B. Shift C ...
CTS(16 )---Android 兼容性定义文档
Android 兼容性定义文档欢迎阅读 Android 兼容性定义文档 (CDD).本文档列举了设备需要满足哪些要求才能与最新的 Android 版本兼容.为了与 Android 兼容,设备实现必须 ...
＜title＞标签：定义文档的标题
定义和用法: <title> 标签定义文档的标题,在所有 HTML 文档中是必需的. 1.title标签只能在head标签内出现: 2.定义浏览器工具栏中的标题: 3.浏览器中收藏夹内书签 ...
html5的最新标准文档,新一代网络技术标准HTML5的研究
科技信息计算机与网络新一代网络技术标准HTML5的研究长沙环境保护职业技术学院湖南大学龙奇［摘要］HTML5是近十年来Web标准最巨大的飞跃.和以前的版本不同,HTML5并非仅仅用来表示W ...
JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.w ...
html5在线显示word文档,JS实现获取word文档内容并输出显示到html页面示例
本文实例讲述了js实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: title var w = new activexobject('word.application ...
Headless CMS Sanity 数据建模——定义文档内容的结构
定义内容的结构. 使用代码定义内容模型是设计使然.它使版本控制变得更容易,并使开发人员能够控制数据结构的布局方式.我们让在界面中添加.更改和删除字段变得毫不费力. 观看Schema 工作原理的视频,或 ...

html5 视口,HTML5 定义文档视口

width=device-width,initial-scale=1

html5 视口,HTML5 定义文档视口相关推荐

最新文章

热门文章