首页 HTML/CSS HTML/CSS——viewport

HTML/CSS——viewport

GavinWu 2022年03月18日 8:03 HTML/CSS 436 Views

什么是viewport

viewport是针对移动设备的响应式设计。viewport 直接翻译就是用户网页的可视区域。通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。

如何控制viewport

常见的控制代码如下所示:

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

content控制属性:
width:控制 viewport 的大小,可以指定的一个值,如 1080,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次加载页面的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。1.0就是将禁止用户放大到实际尺寸之上。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。值为yes或者no,默认为yes

相关文章

  • Wordpres 给page页面地址添加html后缀

    Wordpres 给page页面地址添加html后缀

    Wordpres page页面默认是没有后缀的,通常是以http://xx.com/page/的形式,从SEO的角度出发…

  • HTML/CSS——renderer

    HTML/CSS——renderer

    如果一个网站大量采用了html5和css3,希望用户都以支持H5和css3的webkit内核打开页面,则需要设置cont…

  • rem与px的转换

    rem与px的转换

    rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定…

七牛

发表评论

QR Code

本页二维码