meta标签之viewport

亮学长

已于 2023-11-22 13:59:21 修改

阅读量916

点赞数

分类专栏： JS相关文章文章标签：前端

于 2022-08-30 08:42:12 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/126596258

版权

JS相关文章专栏收录该内容

64 篇文章 0 订阅

订阅专栏

head标签内的meta标签

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

项目	Value
width	设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

解决1px问题

方法一

meta标签中的 viewport属性 ，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

方法二

mate标签中的 viewport属性 ，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

亮学长

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
meta标签之viewport

head标签内的meta标签之viewport
复制链接

扫一扫

专栏目录

html网页中meta viewport属性说明

09-28

主要介绍了html网页中meta viewport属性说明,需要的朋友可以参考下

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

weixin_44932552的博客

08-01

6816

1. 什么是 meta 标签? 可提供有关页面的元信息 2.移动端适配的目的：通常我们在pc上看到的页面都是比较大的，在pc上访问页面是正常显示的，默认是不会被缩放的，除非是手动进行了缩放，页面才会被放大比例或者是缩小比例显示。但是在移动端是不一样的，如果将一个pc端的页面放到手机端进行访问，那么可能出现页面挤到一起、布局错乱或者出现横向滚动条的情况，我们给用户带来不好的体验。还有在屏幕尺寸大小不同的手机上进行访问页面时，页面显示的效果不能合理的展示，我们期望的是在手机屏幕较大时显示的内容比较大一些，手机

参与评论您还未登录，请先登录后发表或查看评论

彻底理解 Meta 标签中的 viewport 属性、含义及作用

最新发布

qq_39454432的博客

05-06

607

彻底理解 Meta 标签中的 viewport 属性、含义及作用

meta 之 viewport

weixin_30562507的博客

09-02

移动网页开发涉及到 viewport，随意一篇，分享一下。常用的 viewport meta 如下： 1 <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> ...

Viewport Meta 标记：让网页适应各种设备的魔法符号

STATICHIT静砸的博客

12-11

192

Viewport（视口）简单来说，就是你在屏幕上能看到的区域。在桌面浏览器中，这通常是整个浏览器窗口，但在移动设备上，情况就复杂了。因为移动设备的屏幕尺寸各不相同，Viewport Meta 标记就变得尤为重要。

css3响应式设计

sixteen_cicle的博客

10-26

440

说明：手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中 width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scal

[转载]移动页面所需meta元素和Viewport窗口知识点

weixin_30629653的博客

04-08

153

Meta标签 vs Viewport http://www.2cto.com/kf/201409/335779.html http://blog.csdn.net/freshlover/article/details/40432247 Viewport 1、针对移动端浏览器iphone 网站开启对web app的支持 <meta name="apple-mobi...

meta viewport 你真的了解吗？，web前端CSS全局样式

03-28

696

看完上面的几个属性是不是觉得对 viewport 理解了，甚至觉得在viewport 的世界里如鱼得水。如果我对你说这只是 viewport 之旅的开始，你会不会觉得生活不再美好了？且慢，我们不妨一步一步来？上面所说的其实只是 viewport 的基本概念，一点点皮毛而已，如果要对其作深入的了解，我们还得专门拿出点时间来跟他耗耗。三个视窗Viewport 虽然它只是一个单词，但它却囊括了三个方面。是哪三个方面呢？Viewport 分为：视觉视窗、理想视窗、布局视窗。怎么样这会儿傻眼了吧？宝宝不用怕，我们一个

meta标签viewport详解

chelen_jak的专栏

08-15

1124

转自：http://blog.csdn.net/rogerjava/article/details/17142955 1.什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的

meta 中name="viewport" 的含义

lnx0307的专栏

07-03

5318

1、<meta name="viewport" content=" "> ViewPort 标记用于指定用户是否可以缩放Web页面 ViewPort 标记还表示文档针对移动设备进行了优化 2、<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimu

html meta viewport属性说明

12-13

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content

meta标签中的使用viewport定义屏幕css

09-28

meta标签中的viewport可以设置屏幕的css样式，包括宽、高、初始缩放比例等等

meta标签中的viewport控制设备屏幕css

09-28

meta标签中的viewport可以控制设备屏幕的高度、宽度、初始的缩放比例等等，喜欢的朋友可以了解下

自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

08-29

主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

meta标签对viewport的设置详解

qq_35457469的博客

03-18

1668

为了达到兼容: <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale-1,user-scalable=no"> 对viewport的设置的meta建议写在已有的meta标签()之后 name=“viewport”:说明当前meta标签是用来设置viewport的属性的，这个属性只...

移动前端开发之viewport的深入理解

热门推荐

FFy's Blog

01-26

1万+

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a

移动端适配 - HTML meta viewport属性说明

ld395353765的博客

05-28

2022

利用meta标签对viewport进行控制　移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。　　我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中： <meta name="viewport" conte...

meta viewport 中有6个通用属性

qq_42796035的博客

03-31

187

meta viewport 中有6个通用属性： width 设置layout viewport的宽度正整数或字符串 'width-device' initial-scale 设置页面的初始缩放值，数字或小数 minimum-scale 允许用户的最小缩放值数字或小数 maximum-scale 允许用户的最大缩放值数字或小数 height 设置layout viewport ...

html移动端meta viewport

09-10

移动端的meta viewport是用于控制网页在移动设备上的显示方式的一种标签。在HTML中，可以通过以下代码来设置meta viewport： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 这个meta标签指示设备使用与设备屏幕宽度相等的视口宽度，并且初始缩放级别为1.0。这样可以确保网页在不同设备上以适合屏幕宽度的方式显示，并且不会进行默认的缩放。通过设置`width=device-width`，可以使得视口宽度与设备屏幕宽度一致。而`initial-scale=1.0`设置初始缩放级别为1.0，即不进行缩放。此外，你还可以使用其他属性来进一步控制视口的行为，例如设置最小和最大缩放级别： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> ``` 这样就限制了用户在移动设备上对页面进行缩放的能力。需要注意的是，meta viewport标签应该放在HTML文档头部的head标签内，以便浏览器正确解析。这样可以确保网页在移动设备上获得更好的显示效果。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交