meta viewport 是做什么用的，怎么写？

最新推荐文章于 2024-05-17 09:40:17 发布
最新推荐文章于 2024-05-17 09:40:17 发布
阅读量459 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_qiu_shuang/article/details/108858261
版权

meta viewport 是做什么用的，怎么写？

该meta标签的作用是让当前viewport的宽度等于设备的宽度‘

一般写

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

meta viewport 的6个属性：

width设置layout viewport的宽度，为一个正整数，或字符串"width-device"

initial-scale设置页面的最大缩放值，为一个数字，可以带小数

minimum-scale允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale允许用户的最大缩放值，为一个数字，可以带小数

height设置layout viewport的高度，这个属性并不重要，很少使用

user-scalable 是否允许用户进行缩放，值为"no"或"yes"

_wangqs
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML meta viewport属性详细说明
12-10
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” cont
meta viewport是干啥用的
让世界更美好！
09-10 4324
meta初探 在每个html页面的header部分常常会看见一个meta标签. 这个标签中最常写的就是下面的内容: &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&amp;gt; 这个标签内...
meta viewport标签的作用是什么
最新发布
2402_84885073的博客
05-17 416
IE盒模型（IE Box Model）：元素的宽度和高度包括内容、内边距和边框，但不包括外边距。这个标签告诉浏览器页面的宽度应该与设备的屏幕宽度相同，页面应该以原始大小显示，并且允许用户缩放页面。标准盒模型（Standard Box Model）：元素的宽度和高度只包括内容，内边距和边框会增加到元素的宽度和高度上。如果要计算一个元素在页面上实际占据的宽度和高度，你需要将内容的宽度和高度加上内边距、边框和外边距。对于元素的width和height，它们实际上是指内容的宽度和高度，不包括内边距、边框和外边距。
viewport meta标签的作用
zzm_justin的专栏
01-07 1100
当我们使用手机浏览器浏览一个适合PC端浏览的页面时，浏览器会将网页的内容放至一个虚拟的窗口（通常称之为viewport），可以让用户改变可见网页内容的大小。如下面图示：                 使用viewportmeta标签可以很方便地在不同屏幕尺寸的手机上对内容布局和显示的控制，通常针对移动网页设计的页面viewport meta标签如下： 下面是对viewpor
meta viewport 是用来做什么的？怎么用？
Kofe_Chen的博客
03-06 732
题目同样是 面试 会问到的一个常见问题之一，同样我们刚开始还是先 科普 一下前置知识： 设备像素（device pixels）：物理像素，显示器的最小物理单位。 这里的一个像素，并不一定是一个小正方形区块，也没有标准的宽高，知识用于显示丰富色彩的一个 “点” 而已。 设备独立像素（device independent pixels）：独立于设备的像素。 有一个非严谨的说法，分辨率指的就是设备独立...
meta viewport的使用
dexing07的博客
11-02 887
meta viewport作用： 因为现在移动设备的PC的不同，也代表着不同浏览器的可视区域也是不同的。 而且还有一点，CSS中的1px不等同于每个设备的1px，也就是说每个设备的分辨率不同会影响到所在网页的显示大小 最重要的是用户缩放也会影响到显示的网页的效果。 而meta viewport就是为了解决以上问题的。 什么是缩放？个人理解是用户在移动端主动改变屏幕伸缩大小（放大，缩小）的行为。先入
html meta viewport属性说明
12-13
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局）...
html网页中meta viewport属性说明
12-13
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ``` - `width`: 这个属性设置视口的宽度。可以设置为固定的像素值，如`600`，或特殊值`device-width`，表示设备的宽度...
meta viewport使网页在iPhone中满屏显示控制
12-11
无奈之下，忽然想到，自己常常访问的新浪触屏版是怎么做的？打开Opera， 看源码在HTML头发现了meta viewport，难道是这个家伙在发挥作用吗？ 加上试试，果然满屏了。顺便去查了一下这个标签的作用，记录一下，方便...
html中的meta标签的viewport有什么用？
yangjidaimin的专栏
05-25 721
首先介绍几个概念： 物理像素/设备像素。 是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的设备像素单位 css像素/设备独立像素 css像素/设备独立像素，是一个相对单位，css像素主要用在浏览器中，在pc端一个css像素对应一个设备像素，在移动端1个css像素对应dpr*dpr个设备像素 设备像素比 简称dpr，一般通过window.devicePixelRatio获取，表示 设备像素/ css像素（设备独立像素） 屏幕分辨率 屏幕分辨率指的
meta标签viewport的深入理解（转）
u010227042的博客
07-02 2472
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1406
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
meta中的viewport指令
weixin_30553065的博客
07-27 139
在查看bootstrap教程中，碰到 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 后，在群兄弟小胡帮助下，知道viewport含义： ViewPort<meta>标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大和最小缩放比例是什么。使用Vi...
关于HTML5中meta name=“viewport“ 的用法
热门推荐
自然醒
11-01 7万+
vieport，移动端布局
浅谈meta viewport设置移动端自适应
筱葭的博客
03-06 5万+
1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为
viewport
Cipuzp的博客
11-11 778
1.2 viewport 1.2 meta viewport 是做什么用的，怎么写？ viewport 指 web 页面上用户的可见区域。 1.2.1 viewport 常用属性： width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width 为设备的宽度（单位为缩放为 100% 时的 CS...
HTML中meta标签viewpoint的作用
oscar92420aaa的博客
10-19 5623
1.在web上浏览的时候，响应式布局是好用的，放大缩小页面都可以实现页面变更，但是在手机上调试的时候死活不能用 2.因为css中@media是根据window的宽度来控制css的，所以我尝试输出了一下在window变更的时候window的width，结果发现PC上使用时一切正常，而手机上输出的一直是980。 原因很简单，手机上的浏览器是全屏的，我手机实际宽度是320像素，而我手机分辨率
meta viewport 是做什么的
04-09
meta viewport是用来设置网页在移动端设备上的显示效果的。通过设置meta viewport，可以使网页在移动设备上自适应屏幕大小，并且可以控制缩放比例和视口大小，让用户在使用移动设备浏览网页时获得更好的体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值