为什么移动Web页面都喜欢width=device-width 且关闭系统缩放功能

最新推荐文章于 2024-04-24 17:17:21 发布
最新推荐文章于 2024-04-24 17:17:21 发布
阅读量7.2k 收藏 5
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyamy/article/details/51859909
版权

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

在网页的<head>中增加这句话，可以让网页的宽度自动适应手机屏幕的宽度。其中：

width=device-width ：表示宽度是设备屏幕的宽度

nitial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

手机的屏幕肯定有各种分辨率如果单纯固定死的话，你就看不到其他手机分辨率的效果了。移动端的设计就是可以让客户舒服浏览的同时兼顾美学，如果允许客户随意缩放比例，我个人觉得，这专门做手机端的意义就不大了。

当然只通过viewport标签还是不够的，还需要配合Media Query进行响应式设计。

一般这么写：

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

岩啊岩_H
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
详解&lt；meta name=“viewport“ content=“width=device-width“&gt；标签
RUCwang的博客
01-13 2万+
详解&lt;meta name="viewport" content="width=device-width"&gt;标签 我们拿到一个设计稿，以iPhone7为基准的， 好的，我们按照习惯在html插入标签 &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=...
[移动端] “viewport“ content=“width=device-width, initial-scale=1.0“ 什么意思
最新发布
Madman528的博客
04-24 315
但是总不能写死这个宽度,为了让页面显示完整,可以让视口宽度等于设备宽度。因为默认视口是980px,这个盒子相对980等比缩小就变成这样了。如果你不想别人放大,你可以设置。确保万一 ,最小最大值都设置1。怎么换成移动端就这么小了呢?假如我的视口是400px。布局视口, 代码如下。
meta name="viewport" content="width=device-width,initial-scale=1.0"理解
yiyueqinghui的博客
01-23 3万+
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 content属性值 width:设备可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...
name="viewport" width="device-width" 到底都是啥
热门推荐
lamanchas的博客
11-07 3万+
移动端页面渲染过程，viewport，DPR，PPI
content="width=device-width,initial-scale=1"
bujiongdan的博客
08-04 1万+
&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
在移动客户端手机页面布局中，我们经常使用phys.width和device-width这两个概念。phys.width是指设备的物理宽度，而device-width是指CSS宽度。我们可以通过document.documentElement.clientWidth获取phys.width，而...
meta标签中的使用viewport定义屏幕css
12-08
width-viewport的宽度 height-viewport的高度 initial-scale 初始的缩放比例 minimum-scale 允许用户缩放到的最小比例 maximum-scale 允许用户缩放到的最大比例 user-scalable 用户是否可以手动缩放
viewport 的基本原理以及详细使用方法
12-14
一.viewport的概要 移动端浏览器通常都在一个比...meta name="viewport" content="width=device-width, initial-scale=1" /> 如果不想页面缩放就用下面的代码 <meta name="viewport" content="width=device-wi
通过viewport实现jsp页面支持手机缩放
01-20
meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes”> 标签 其中个属性的意思： width ：- viewport的宽度 height： – ...
ngx-pinch-zoom:模块提供了使用触摸屏上的手势进行图像缩放和定位的功能
05-14
夹角变焦 该模块提供了使用触摸屏上的手势进行图像放大，缩小和定位的机会。...meta name =“ viewport” content =“ width = device-width，initial-scale = 1，maximum-scale = 1.0，user-scala
width=device-width, initial-scale=1
weixin_61083660的博客
01-16 203
在FreeCodeCamp中一直显示没有通过代码，明明是一样的字符，如下。重要的是逗号后面还有一个空格。
width、device-width和viewport
ljxqsq的专栏
04-07 1716
媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机，它们之间的区别很容易理解：width和height指浏览器视区的尺寸，而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器，所以width和height是您需要使用的度量方法。 移动浏览器将填满可用的屏幕，所以您可
关于 viewport 界面适配不同设备方案： meta 标签 name="viewport" content="width=device-width, initial-scale=1"
weixin_41796631的博客
04-18 3084
什么是 Viewport? viewport 是用户网页的可视区域。1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这...
css3媒体查询中device-width和width的区别​​​​​​​
yueyue8355的博客
07-26 172
https://blog.csdn.net/weixin_34248849/article/details/94057471?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault
关于＜meta name=“viewport“ content=“width=device-width,initial-scale=1.0“＞的解释
wuxingwuyou的博客
10-08 732
1、名词解释2、viewport 语法介绍：3、target-densitydpi 属性的 取值范围 注意：所有的缩放值都必须在0.01–10的范围之内 3、target-densitydpi 属性的 取值范围 1、device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。2、high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。3、medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设
移动WEB开发中媒体查询里的width, device-width, resolution
weixin_30270889的博客
02-17 78
/*1、width： viewport的宽度，css像素，三星S3的viewort默认宽度是980px。 当设置viewport width=device-width时，对应的媒体查询中width的值为：设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------...
移动Web页面，为什么都喜欢width=device-width，并且关闭系统缩放功能？
weixin_33991727的博客
12-17 4520
如题，这种方式做的移动Web页面，设计稿通常是按照960*640的规格进行设计，再开发的时候，通常会把里面量到的尺寸缩小一半再开发。<metaname=”viewport”content=”width=device-width,initial-scale=1,maximum-scale=1″>那既然要缩小一半再开发，为什么不直接设置width=640，然后...
wdith=100%与width=auto
weixin_45803556的博客
11-30 277
当width=100%时，子元素继承父元素的宽度，但不包括子元素设置的padding,margin,border. css样式： .aa{ width:400px;height:200px;background-color:red; } .bb {width:100%;height:100px;background-color:blue; } html样式： <div class="aa"...
meta name=viewport centent=width=device-width
06-08
content 属性中的 width=device-width 表示将视口的宽度设置为设备的宽度，设备的宽度指的是设备的屏幕宽度，而不是设备的分辨率宽度。这个设置可以确保在移动设备上正确地显示网页内容，使得网页在不同大小的设备上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值