移动端视口

1.什么是视口?

视口简单理解就是可视区域大小我们称之为视口
在PC端,视口大小就是浏览器窗口可视区域的大小(窗口多大,可视区域/视口就多大)
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

2.为什么是980而不是其他的值?

因为过去网页的版心都是980
乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980
后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980

3.移动端自动将视口宽度设置为980带来的问题——内容被缩小

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页
但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的
在这里插入图片描述
所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
在这里插入图片描述

4.如何保证在移动端不自动缩放网页的尺寸?——视口大小同可视区域大小

通过meta设置视口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width=device-width 设置视口宽度等于设备的宽度
  • initial-scale=1.0 初始缩放比例, 1不缩放
  • maximum-scale:允许用户缩放到的最大比例
  • minimum-scale:允许用户缩放到的最小比例
  • user-scalable:用户是否可以手动缩放,手指缩放
    注意点:以上属性有可能在模拟器上无用,需要真机测试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值