移动端布局三种视口_移动端适配之视口和meta标签

这是关于移动端适配的第一篇文章，这篇文章主要介绍视口以及和视口有关的meta标签的使用。

不管三七二十一，我们先新建一个页面：

这不是一个demo

*{margin: 0; padding: 0;}

div{height: 100px; background: red;}

在谷歌浏览器下，我们可以看到不同手机的适配情况：

iPhone5下

图片描述

可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？

其实这个980所表示的就是布局视口。

布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。

移动端布局三种视口_移动端适配之视口和meta标签相关推荐

移动端布局三种视口_前端基础：必须要知道的移动端适配（4）——视口
视口(viewport)代表当前可见的计算机图形区域.在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等--即指你正在浏览的文档的那一部分. 一般我们所说的视口共包括三种:布 ...
移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配
很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点.以帮助大家更加容易理解移动端H5页面的适配方案. 解读移动H5适配最重要的html标签:meta视口标 ...
移动端布局三种视口_移动端开发知识[系列] - 视口viewport
移动端H5知识[系列] - 视口viewport HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山.网站开发也从PC平台向移动端平台开发发展.作为一个优秀的前端开发者,除了能够处 ...
移动端布局三种视口_什么是视口？移动端浏览器中的3种视口
视口(Viewport)是移动Web开发中一个非常重要的概念,最早是由苹果公司在推出iPhone手机时发明的,其目的是为了让iPhone的小屏幕尽可能完整显示整个网页.通过设置视口,不管网页原始的分辨 ...
移动端布局三种视口_移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
移动端布局(三) 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居中布局一定会有深刻的认识. ...

移动端布局三种视口_移动端适配之视口和meta标签

移动端布局三种视口_移动端适配之视口和meta标签相关推荐

最新文章

热门文章