移动端布局三种视口_移动端开发知识[系列]

移动端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更加好用且兼容良好。因此，在此我仅讲解第一种设置方法。

窗口默认显示效果

设置视口

将视口设置为320像素

当前的显示状态

将视口设置为设备宽度

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

欢迎沟通交流~HTML5学堂

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

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

视口的相关知识点

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学堂

移动端布局三种视口_移动端开发知识[系列] - 视口viewport相关推荐

移动端布局三种视口_前端基础：必须要知道的移动端适配（4）——视口
视口(viewport)代表当前可见的计算机图形区域.在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等--即指你正在浏览的文档的那一部分. 一般我们所说的视口共包括三种:布 ...
移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配
很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点.以帮助大家更加容易理解移动端H5页面的适配方案. 解读移动H5适配最重要的html标签:meta视口标 ...
移动端布局三种视口_移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
移动端布局三种视口_什么是视口？移动端浏览器中的3种视口
视口(Viewport)是移动Web开发中一个非常重要的概念,最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页.通过设置视口,不管网页原始的分辨 ...
移动端布局三种视口_移动端适配之视口和meta标签
这是关于移动端适配的第一篇文章,这篇文章主要介绍视口以及和视口有关的meta标签的使用. 不管三七二十一,我们先新建一个页面: 这不是一个demo *{margin: 0; padding: 0;} ...
移动端布局(三) rem布局及原理
什么是rem 首先来了解一下什么是em: 作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小. s1.s2.s5.s6的font-size和line-he ...
视频直播画中画效果（边角叠加、去背景、并列布局三种效果）
阿酷TONY原创 2020-8-31 长沙在直播过程,经常要用到画中画直播效果,画中画即两个画面或多个画面做叠加. 画中画直播如何操作?我整理了三种直播画中画的截图效果对比~~ 第1种:画中画直播效 ...
kafka消费的三种模式_快速认识Kafka
1.Kafka是什么简单的说,Kafka是由Linkedin开发的一个分布式的消息队列系统(Message Queue).kafka的架构师jay kreps非常喜欢franz kafka,觉得ka ...
实现DIV居中布局三种途径(转)
DIV+CSS布局有很多值得学习的地方,这里和大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识. ...

移动端布局三种视口_移动端开发知识[系列] - 视口viewport

移动端布局三种视口_移动端开发知识[系列] - 视口viewport相关推荐

最新文章

热门文章