当前位置: 首页 > news >正文

0基础学习移动端适配

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

不管三七二十一,我们先新建一个页面:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这不是一个demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

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

图片描述

图片描述

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

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

300958470402077.png

布局视口有980像素,可是我们的屏幕很小,按理说应该会有滚动条才是,可实际上并没有。这就需要归功于另一个视口:视觉视口

视觉视口visual viewport:屏幕上显示的页面的一部分。听起来很玄乎,可是你认真看下面这张图,你就能明白视觉视口(visual viewport)和布局视口(layout viewport)的关系了:
图片描述
图片描述

此时,因为我们的视觉视口 = 布局视口,所以没有出现滚动条。虽说是没有滚动条,但是pc端能友好显示的页面,在移动端上就显示的很怪异。字体很小,很难看清。比如亲爱的百度:
图片描述

如果想让字体大小可读,又该怎么办?在此之前,我们还需要了解另一个视口,理想视口
理想视口ideal viewport:它提供了设备上理想网页的大小。这个值可以在不同设备的理想视口查到。常用的有:i5是320,i8是375,plus是414。

扯了那么多,那要如何适配呢?
相信一定会有一些前辈,他们苦口婆心地告诉你,你只要加这一行代码就可以了:

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

怀有好奇心的我们,勇敢地作出了尝试:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>这不是一个demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>

得到了如下的效果:
图片描述
图片描述
图片描述

字体在三大尺寸下,显示都算是友好,但是奇怪的是div的宽度不再是980,而是和设备的宽度有关。这一切,都得归功于我们刚刚加的width=device-width了。

width=device-width,这句代码的意思就是把布局视口 = 理想视口。那既然布局视口跟着变了,那刚刚的视觉视口又算咋回事啊,它现在的值等于多少?这不还有我们刚刚设置的另一个代码initial-scale=1.0,它的作用就是改变视觉视口的。

initial-scale指的是缩放系数。其中有这样的公式:

视觉视口宽度 = 理想视口宽度 / 缩放系数
缩放系数 = 理想视口宽度 / 视觉视口宽度

拿i5的机型来说,根据公式可得:
视觉视口宽度 = 320 / 1 = 320
布局视口宽度 = 320
所以:视觉视口宽度 = 布局视口宽度。页面无滚动条。

那如果我改变initial-scale的值会有什么反应呢,同样我以i5的机型做示范:

initial-scale = 0.5 「 div宽度640,页面无滚动条 」

图片描述

initial-scale = 1 「 div宽度320,页面无滚动条 」

图片描述

initial-scale = 1 「 div宽度320,页面有滚动条 」

图片描述

现在我们好好来捋捋:

initial-scale = 0.5 「 div宽度640,页面无滚动条 」
视觉视口宽度 = 320 / 0.5 = 640
布局视口宽度 = 320
又因为:视觉视口不能大于布局视口,所以此时,将布局视口的宽度提高等于640
总结:视觉视口 = 布局视口 = 640
initial-scale = 1 「 div宽度320,页面无滚动条 」
视觉视口宽度 = 320 / 1 = 320
布局视口宽度 = 320
总结:视觉视口 = 布局视口 = 320
initial-scale = 2 「 div宽度320,页面有滚动条 」
视觉视口宽度 = 320 / 2 = 160
布局视口宽度 = 320
总结:视觉视口 < 布局视口 页面出现了滚动条。

最后总结:

  1. 页面是否出现滚动条,看布局视口和视觉视口的大小
  2. 页面元素的宽度取决于布局视口的大小

留个思考题:为什么在未设置<meta>的情况下,页面无滚动条,浏览器做了哪些默认的设置?

参考:

  1. ppk大神讲解视口第一篇
  2. ppk大神讲解视口第二篇
  3. ppk大神讲解视口第三篇

相关文章:

  • 产品经理工作职责
  • 【SpringBoot】URL路径映射规则
  • JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!...
  • Java之多线程优先级基础
  • WCF应用场景
  • 基于Netty+Zookeeper+Quartz调度分析
  • 关于Execel 2007 连接到 hive odbc
  • 计算机网络
  • cocos2d-x游戏开发系列教程-超级玛丽06-CMGameScene
  • 使用pip命令报You are using pip version 9.0.3, however version 18.0 is available pip版本过期.解决方案...
  • JavaScript访问对象属性
  • Zeit.co 免费服务器平台
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • vue入门知识点
  • 微信公众平台 学习笔记(一)
  • [笔记] php常见简单功能及函数
  • 【翻译】babel对TC39装饰器草案的实现
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • conda常用的命令
  • HTTP那些事
  • JAVA 学习IO流
  • Koa2 之文件上传下载
  • Leetcode 27 Remove Element
  • Less 日常用法
  • Spring-boot 启动时碰到的错误
  • SpringBoot几种定时任务的实现方式
  • SpringCloud集成分布式事务LCN (一)
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 大数据与云计算学习:数据分析(二)
  • 力扣(LeetCode)965
  • 前端 CSS : 5# 纯 CSS 实现24小时超市
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 如何解决微信端直接跳WAP端
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 深度学习入门:10门免费线上课程推荐
  • 小程序、APP Store 需要的 SSL 证书是个什么东西?
  • 用mpvue开发微信小程序
  • AI算硅基生命吗,为什么?
  • 阿里云IoT边缘计算助力企业零改造实现远程运维 ...
  • 如何用纯 CSS 创作一个货车 loader
  • #1014 : Trie树
  • $HTTP_POST_VARS['']和$_POST['']的区别
  • (2)STM32单片机上位机
  • (23)Linux的软硬连接
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (Forward) Music Player: From UI Proposal to Code
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (Python) SOAP Web Service (HTTP POST)
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • (转)关于pipe()的详细解析
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • ./configure,make,make install的作用
  • .Family_物联网