移动端视口设置 viewport

曾经终败给现在 2022-05-26 01:29 438阅读 0赞

提示：这里使用的测试工具是Chrome，老版本的Chrome，有的同学没见过这个，其实就是Chrome浏览器，

如果有需要，可以留个邮箱；

\-----------------------------------------------------------

先来看看第一个参数：

< meta name= "viewport" content= "width=device-width">

width=device-width    width 设置的是viewport的宽度，这里设置 width=device-width 的意思是视口和我们的

移动设备的宽度是一样的，效果如下：这里测试用的是苹果4的屏幕，320的宽度，内容是刚好铺满屏幕的；

![70][]

我们再换一个苹果6plus：414的宽度同样是铺满屏的，也就是适应屏幕的宽度；

![70 1][]

我们假设这里指定width=414，那么在苹果6plus下面显示是正常的，但是到了苹果4下面显示就不正常了，

视口宽度414>320 ,就会出现视口横向超出了，下面的效果：

![70 2][]

所以说，进行移动端的页面的开发的时候，我们需要适配不同的屏幕，这里设置width=device-width,

第二个参数：  initial-scale=1.0

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

这里的 initial-scale 设置 页面的初始缩放比例，也就是页面的一开始加载出来的时候的页面的缩放比例；

一般情况下我们就是不缩放， initial-scale=1.0 ,也就是正常显示；

我们看看缩放比为1.5的情况下的情形：可以看出放大了

![70 3][]

第三个参数：maximum-scale=1.0 设置最大可以缩放的比例；

minimum-scale=1.0 设置最小的可以缩放的比例；

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

第四个参数：user-scalable=no 设置用户是否可以对页面进行缩放 ；

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

minimum-scale=1.0,user-scalable=no">

[70]: /images/20220526/d285b60141354d14807ab15c3379a4c5.png
[70 1]: /images/20220526/bdd0ce09355e4f889edefb859ad74bb4.png
[70 2]: /images/20220526/1a09fca0f3db4e088863e3917ee68680.png
[70 3]: /images/20220526/776167736cc04833b7ad2bc94fc916ea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，438人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈移动端中的视口（viewport）

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 C

悠悠/ 2023年06月24日 15:23/ 0 赞/ 14 阅读

相关视口：visual viewport、layout viewport、ideal viewport 与 viewport属性

目录一、视口 1、定义 2、分类 1.布局视口（layout viewport） 2.视觉视口(visual viewport) 3.理想视口(ideal vie

素颜马尾好姑娘i/ 2022年11月16日 10:48/ 0 赞/ 355 阅读

相关移动web开发视口代码

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

不念不忘少年蓝@/ 2022年07月11日 23:24/ 0 赞/ 216 阅读

相关移动端viewport的理解

1.viewport的理解：viewport事实上是用来承载页面的，大部分设备默认为980px，一般情况下会有一个默认的初始缩放比，通过这个初始缩放比使得viewport能够完

╰+哭是因爲堅強的太久メ/ 2022年06月06日 08:46/ 0 赞/ 208 阅读

相关移动端视口设置 viewport

提示：这里使用的测试工具是Chrome，老版本的Chrome，有的同学没见过这个，其实就是Chrome浏览器，如果有需要，可以留个邮箱； \---------------

曾经终败给现在/ 2022年05月26日 01:29/ 0 赞/ 439 阅读

相关【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

1、看一下我的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

左手的ㄟ右手/ 2022年05月21日 04:08/ 0 赞/ 251 阅读

相关移动端viewport自适应屏

1，viewport viewport,是移动端特有。这是一个虚拟的区域，承载网页的。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分

﹏ヽ暗。殇╰゛Y/ 2022年05月09日 03:20/ 0 赞/ 270 阅读

相关移动端设置详解

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

水深无声/ 2022年05月03日 14:26/ 0 赞/ 216 阅读

相关移动端布局-分辨率和视口

客观上，客户端浏览器中用于呈现网页的区域大小不同，即viewport(视口)不同，主观上，我们的页面代码又想给每一位用户完美的体验，这就需要网页具有变通的能力，让布局和呈现能够

秒速五厘米/ 2022年01月22日 08:11/ 0 赞/ 313 阅读

相关视口概念、移动端视口适配

视口视图窗口,页面中html元素的显示大小移动端页面要想在移动端加载必须进行视口的适配如果不对页面进行调整,那么

心已赠人/ 2021年07月24日 19:08/ 0 赞/ 385 阅读