meta 中name="viewport" 的含义

最新推荐文章于 2024-09-25 17:05:58 发布

lnx0307

最新推荐文章于 2024-09-25 17:05:58 发布

阅读量5.4k

点赞数 3

本文链接：https://blog.csdn.net/lnx0307/article/details/46741479

版权

1、<meta name="viewport" content=" ">

ViewPort <meta>标记用于指定用户是否可以缩放Web页面

ViewPort <meta>标记还表示文档针对移动设备进行了优化

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

width和height指令分别指定视区的逻辑宽度和高度；width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制；值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。

initial-scale指令用于设置Web页面的初始缩放比例。

默认的初始缩放比例值因智能手机浏览器的不同而有所差异。

通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lnx0307

关注关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014

添柴程序猿的专栏

02-21

360

移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRa

#＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞ @FDDLC

LiuXingchang的博客

05-12

986

一、问题引入：我们在网页中经常可以看到这么一行代码： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 代码很好读，见名可知义。但还是总结一番比较好。二、解释 1、viewpoint：视角，没啥解释的。 2、devicePixelRatio：设备像素比。这里涉及到两个概念：物理设备的实际像素，CSS像素(逻辑像素)。devicePix..

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

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

08-29

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

实战: 移动端,如何做适配?

热门推荐

自然醒

11-01

7万+

vieport，移动端布局

meta name = viewport

笑望灬星辰

03-30

581

meta name = viewport <meta name="viewport" content="..." /> // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数 // minimum-scale 允许⽤户最⼩缩放

meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

dianzongfan5428的博客

12-25

1183

<meta name="viewport" content="width=device-width,initial-scale=1.0"> content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值...

关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释

10-13

1262

对于移动开发来讲，我还不太熟悉。今天在github上荡了一个系统源码，进行分析。发现其中有这样一段话： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 对于这段话我有些不解，我通过以下资料...

html meta viewport属性说明

12-13

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有...meta name=”viewport” content

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

weixin_30496431的博客

11-06

977

本人对该标签理解不深，这里是复制了穆乙的文章：如果有人进来看到这篇文章，请按此https://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html地址阅读原文。本文仅做自己了解使用。 <meta name="viewport"content="width=device-width, user-scalable=no, initial...

＜meta name=“viewport“ ......＞是什么意思

u012114437的博客

03-24

4590

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 1、name属性值viewport表示视口，不仅匹配PC端，也可匹配移动端。 2、content属性值：（1）width：可视区域的宽度，值可为数字或关键词（2）device-width，设备屏幕的物理宽度（3）height：同width （4）intial-scale:页面首次.

android meta 标签作用,meta标签name="viewport"属性的写法及用法

weixin_39753616的博客

05-25

996

meta标签name="viewport"属性，是专门用来针对手机移动端的网页进行优化而设置的，通过学习viewport的写法和用法，能让我们更加清楚了解，那些在PC端浏览器中设计的网站是如何在手机移动设备上正常显示的？viewport定义viewport有视窗、视区等含义，是专门为手机移动设备设计的，当在手机移动设备打开网页时，就会检测网页meta标签是否设置了viewport，如果设置了，就会...

meta标签name属性值viewport解析

zeros

02-13

1168

什么是viewport，这篇文章介绍的很详细，有兴趣的朋友可以点击这里阅读。因为内容太长，这边就不做过多说明，只做简要概况。什么是viewport？在手机浏览器中能看到网页内容的那块区域称为可视区域，viewport就相当于那块可视区域，但是它的实际大小可能比那块可视区域要大或者要小（一般来说都是大于可视区域），那具体是多大？不同设备它的viewport都不一样，没有固定的值。这就会造成在有些设备中如果viewport大于可视区域就会造成浏览器出现横向的滚动条。所以为了解决这个问题，viewport.

HTML 5 meta name="viewport"

网生代

02-19

1263

在用HTML5开发手机应用或手机网页时，部分总会有如下一段代码: meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/> 什么是Viewport 　　　　手机浏览器是把页面放在一个虚拟的

<head>中几个常用<meta>标签的意义

weixin_33806914的博客

04-03

518

2019独角兽企业重金招聘Python工程师标准>>> ...

HTML中meta=“viewport”的介绍

diji8584的博客

08-07

2096

viewport就是浏览器上用来显示网页的那部分区域 layout viewport:整个网页所占据的区域（包括可视也包括不可视的区域）默认的 visual viewport:网页在浏览器上的可视区域（浏览器中能够看见的区域） ideal viewport:ideal viewport是一个能完美适配移动设备的viewport（没有固定尺寸，就是屏幕的宽度） <...

HTML5中meta name="viewport" 的用法

weixin_42617917的博客

05-03

127

HTML5中meta name=“viewport” 的用法在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例。也就是...

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 name=viewport

03-31

The meta name=viewport tag is used in HTML to give instructions to the browser on how to display the web page on different devices. It allows developers to specify the width, height, and initial zoom level of the viewport, which is the area of the screen that displays the web page. This is important for creating a responsive design that adjusts to different screen sizes and orientations. The tag can also be used to set the maximum and minimum scale, and to enable or disable user scaling.