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

最新推荐文章于 2021-04-15 18:04:51 发布
最新推荐文章于 2021-04-15 18:04:51 发布
阅读量270 收藏 1
点赞数
原文链接：http://www.cnblogs.com/0808bing/p/3429674.html
版权

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

手机页面中在<head></head>中加入这句话，可以让页面适应设备的宽度。

width=device-width--宽度为设备宽度，如果你的页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现可以页面左右滑动，如ipad ios7中客户端页面。

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例   

maximum-scale - 允许用户缩放到的最大比例  

user-scalable - 用户是否可以手动缩放  

转载于:https://www.cnblogs.com/0808bing/p/3429674.html

diaocong4659
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
meta标签中的使用viewport定义屏幕css
12-08
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width-viewport的宽度 height-viewport的高度 initial-scale 初始的缩放...
viewport 的基本原理以及详细使用方法
12-14
<meta name="viewport" content="width=device-width, initial-scale=1"> ``` 这个标签告诉浏览器将viewport的宽度设置为设备的宽度，并保持初始缩放比例为1，确保页面按比例缩放，以适应不同设备。 除了`width`和`...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
LIANGXIAOYAN7002的专栏
12-29 1283
这句写上,就能使网页自动适应不同设备的分辨率了吗.兼容电脑 ipad iphone和android设备了吗. 移动开发其实要做到工作很多 http://davidbcalhoun.com/2010/viewport-metatag/ 一共7篇文章(链接在文底，这是第一篇) 从viewport开始 https://www.v2ex.com/t/113196 待学习。。。补充
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scal
酒肉猿
03-02 5848
触摸屏设备IOS、Android等对网站meta的定义，经常用的时候就是复制下面几行代码。。。<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale
coldh的专栏
08-21 1888
content属性值详解： width：可视区域的宽度，值可为数字或关键词device-width height：同width initial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 user-scalable:是否可对页面进行缩放，0禁止缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
<meta name="viewport" content="width=device-width, initial-scale=1.0">的说明
weixin_34408624的博客
12-01 493
今天在做适配手机版时，chrome调到手机版，但是还是显示PC端的样式，无法展现出手机端的样式； 开始的时候还以为是chrome版本的问题，最新版本的chrome62.0是有很多变化的，而之前工作中使用最多的chrome来调试，是带有标尺等等。 搜索chrome版本无果，想了下，按照道理chrome版本越新，功能应该更好用才是。 百度了一下，发现是因为这句话：<meta name...
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
为了更好地控制移动端的视口，开发者通常会在HTML的<head>部分添加`<meta name="viewport" content="...">`标签。content属性的值可以包含多个参数，如： - `width`: 设定视口宽度，可以设置为具体像素值或"device...
元旦倒计时代码-元旦倒计时.html
12-15
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple...
<meta name="viewport" content="width=device-width, initial-scale=1.0>
zlpzlpzyd的专栏
11-06 845
上面的属性我在使用jQuery Mobile的时候发现的，
一个手机自适应的网页效果解决显示页面很小的问题
12-04
工作需要，要做一个手机自适应的网页效果，终于搞定，先分享并记录！ 其实主要就是改掉HTML页面声明： 在网页中加入以下代码，就可以正常显示了： 复制代码代码如下: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″/> 解释： width – viewport的宽度 height – viewport的高度 initial-scale – 初始的缩放比例 minimum-scale –
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab
xiejunna的博客
06-20 2952
html中的 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">//width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。//initia
WebApp之Meta标签
weixin_30678821的博客
05-29 129
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个...
一些关于Viewport与device-width的东西～
weixin_30374009的博客
11-01 510
进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。比如： 我们经常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什么意思，...
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;可视区域...
meta 标签 viewport content=“width=device-width,initial-scale=1“
weixin_44378370的博客
10-30 1974
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。 其中： width:
html5开发之viewport使用
weixin_34378767的博客
08-30 1123
2019独角兽企业重金招聘Python工程师标准>>> ...
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞
qq_45633812的博客
04-15 6342
移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。 所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewpo
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
最新发布
10-06
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 是一段HTML元标记（HTML meta tag），用于设置移动设备上网页的视口（viewport）属性。视口属性决定了页面在移动设备上的显示方式和缩放比例。这段代码中的width=device-width表示视口宽度等于设备宽度，user-scalable=no表示禁止用户缩放页面，initial-scale=1.0表示初始缩放比例为1.0，maximum-scale=1.0和minimum-scale=1.0表示最大和最小缩放比例都为1.0。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值