HTML5学堂-码匠 HTML5学堂

您当前位于:移动端基础 ——> 移动端开发知识[系列] - 视口viewport

移动端开发知识[系列] - 视口viewport

2015/04/27 19:19:12 | 作者:HTML5学堂(码匠) | 分类:移动端基础 | 关键词:移动端开发,视口,viewport

移动端H5知识[系列] - 视口viewport

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台的网站,还需要能够处理移动端的网页。可是,新的事物伴随着各个浏览器,也就冒出了各种兼容问题。第二步——视口

前些日子,趁平日空隙书写了类库系列,这几天就来“普及”一下移动端HTML5开发的小知识吧~!虽然知识小,但是不得不承认的是,它们很重要~!

本系列共6篇文章,如下为标题列表:

1 谈谈相对单位

2 什么是视口

3 CSS3媒体查询

4 移动端“百变”盒模型

5 移动端“背景”妙用

6 移动端fixed定位模式

第二篇 视口

视口指的是移动设备中的设备屏幕窗口。

在移动端浏览器当中,存在着两种视口,一种是可见视口(也就是我们说的设备大小),另一种是视窗视口(网页的宽度是多少)。什么是可见视口,什么又是视窗视口呢?此处举一个例子:如果我们的屏幕是320像素*480像素的大小(iPhone4),假设在浏览器中,320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度,而能够显示的980像素的宽度就是视窗视口的宽度。

为了显示更多的内容,大多数的浏览器会把自己的视窗视口扩大,简易的理解,就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容(将网页等比例缩小)。

常见viewport数值

iPhone:980

iPad:1024

Android:980

WinPhone:1024

为了让用户能够看清晰设备中的内容,因此我们并不让浏览器按照默认的viewport进行展示。此时就需要进行设置,要尽量保持分辨率和媒体设备视口大小比例为1:1,从而得到最佳的显示效果。

进行视口的设置有两种不同的方法,一种是在meta标签当中,进行视口的设置,通过调整属性值设置视口的具体大小。另一种是使用@viewport进行设置。相比之下,meta更加好用且兼容良好。因此,在此我仅讲解第一种设置方法。

窗口默认显示效果

HTML5 学堂 移动端H5知识普及[系列] - 视口viewport

设置视口

将视口设置为320像素

<meta name="viewport" content= "width=320" />

当前的显示状态

HTML5 学堂 移动端H5知识普及[系列] - 视口viewport

将视口设置为设备宽度

  1. <meta name="viewport" content= "width=device-width" />

将视口设置为设备宽度,并在最初的时候以放大2倍的方式显示

  1. <meta name="viewport" content= "width=device-width, initial-scale=2.0" />

欢迎沟通交流~HTML5学堂

将视口设置为设备宽度,并允许缩放,最大放大到2倍,最小缩小到1/2

  1. <meta name="viewport" content= "width=device-width, maximum-scale=2.0, miniumum-scale=0.5" />

将视口设置为设备宽度,并禁止缩放

  1. <meta name="viewport" content= "width=device-width, user-scalable=no" />

视口的相关知识点

width 设定布局视口宽度

height 设定布局视口高度

initial-scale 设定页面初始缩放比例(0-10.0)

user-scalable 设定用户是否可以缩放(yes/no)

minimum-scale 设定最小缩小比例(0-10.0)

maximum-scale 设定最大放大比例(0-10.0)

target-densitydpi* 设定目标屏幕的dpi(device-dpi)

结束~!

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS