vue项目实战系列十四：viewport引入

最新推荐文章于 2024-03-05 11:50:05 发布

完美句号

最新推荐文章于 2024-03-05 11:50:05 发布

阅读量416

点赞数 6

文章标签： vue.js 前端 javascript 性能优化系统架构软件工程前端框架

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135293098

版权

本文介绍了手机浏览器中的viewport概念，包括其在移动设备屏幕上的作用、为何比屏幕大以及通过<meta>标签控制viewport大小和缩放的能力。重点讲解了width、height、initial-scale、maximum-scale、minimum-scale和user-scalable等属性的作用。

摘要由CSDN通过智能技术生成

1. viewport:

①. 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中.

②. 通常这个虚拟的"窗口"比屏幕要宽,就不用把每个网页挤到很小的窗口中,也不会破坏没有针对手机浏览器优化的网页的布局.

③. 用户可以通过平移和缩放来看网页的不同部分.

(1). 白话翻译:

①. 移动设备上的viewport是设备的屏幕用来显示网页的那一块区域.

②. 但又不局限于浏览器可视区域的大小,可以比浏览器的可视区域要大(通常情况是大于)或小.

③. 因为考虑到移动设备的分辨率相对于PC要小,为了能在移动设备上正常显示那些PC的网站.
   a. 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px.
   b. 可能是其它值,由设备自己决定.

④. 这样浏览器也会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的.

2. 设置meta兼容移动端:

通过meta tag,让开发者来控制viewport的大小和缩放.

<meta name="viewport"
      content="width=device-width,
               initial-scale=1.0,
               maximum-scale=1.0,
               minimum-scale=1.0,
               user-scalable=no">

注:
①. width:
    a. 控制viewport的大小,可以指定一个值,如600.
    b. 特殊的值:如device-width为设备的宽度(单位是缩放为100%的CSS的像素).

②. height:
    a. 和width相对应,指定高度.

③.initial-scale:
   a. 初始缩放比例,页面第一次加载时的缩放比例.

④. maximum-scale:
    a. 允许用户缩放到的最大比例,范围从0到10.0

⑤. minimum-scale:
    a. 允许用户缩放到的最小比例,范围从0到10.0

⑥. user-scalable:
    a. 用户是否可以手动缩放,值可以是:yes、 true(允许用户缩放)
    b. no、false(不允许用户缩放)