在HTML中增加meta name="viewport"控制页面不随着放大缩小变形的实现方式

最新推荐文章于 2023-02-17 18:57:13 发布
最新推荐文章于 2023-02-17 18:57:13 发布
阅读量1.4w 收藏 5
点赞数 1
分类专栏： HTML 文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gavid0124/article/details/45305707
版权

  1.  PC端添加以下meta内容：

<head>

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

....

</head>

   

   2. Mobile端添加以下meta内容：

<head>

    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

.....

</head>


说明：

    target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 为设备原本的DPI值，不会有任何缩放。

    width=device-width，指定屏幕宽度，device-width设备屏幕的宽度。

gavid0124
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中设置网页自适应的MATE标签
洛阳梁朝伟的博客
07-21 1万+
一、 1.name="viewport"      //设置视口（网页可绘制的区域） 2.width=device-width    //应用程序的宽度和屏幕的宽度是一样的 3.height=device-height  //应用程序的高度和屏幕的高是一样的 4.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放） 5.mini
html meta viewport属性说明
12-13
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过...
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1417
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
手机版网页设计html5元素meta name=”viewport”设置需要注意的地方
和上帝躲猫猫
02-25 2163
越来越多的网页开始针对手机浏览，自适应屏幕大小了，css的设置方法请参见前面的文章：用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解，在这篇文章里面我们详细解读一下，html5属性里面 meta name=viewport 的最佳设置方式。 首先：看看实例一 .... ... 解读：width=device-width
【前端】页面自适应移动端宽度 / 固定页面比例不允许放大缩小 meta name="viewport"
我是Superman丶的博客
04-09 1818
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> <meta name="viewport" content="width=device-width...
HTML meta中的viewport指令详解
lzssing-GG的博客
02-15 480
在手机HTML网页源代码中经常如下的一行代码：   这行代码是用来做什么的呢？   这就要了解什么是“viewport”了。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。读到这里，我们可以大概
viewport mata 浏览器不再缩放
12-06 606
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
在移动客户端手机页面布局中，meta标签的使用非常重要，今天我们将详细介绍meta标签中的几个关键属性，包括viewport、content、width、initial-scale、minimum-scale、maximum-scale，并解释它们在自适应布局中的...
meta viewport使网页在iPhone中满屏显示控制
12-11
打开Opera， 看源码在HTML头发现了meta viewport，难道是这个家伙在发挥作用吗？ 加上试试，果然满屏了。顺便去查了一下这个标签的作用，记录一下，方便以后 使用。 meta viewport <meta name=”viewport” ...
html网页中meta viewport属性说明
12-13
HTML中的`<meta>`标签用于提供元数据，其中`viewport`属性是专为移动设备设计的，它允许网页开发者控制页面在移动设备上的显示方式。移动浏览器通常会在一个虚拟的“视口”（viewport）中渲染网页，这个视口比实际...
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 初始的缩放...
网页内容设置有用的meta设置解决网页内容不能适应某些浏览器宽度的问题
weixin_30682415的博客
05-29 70
时间紧张，先记一笔，后续优化与完善。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999...
如何让网页的内容不随着网页的放大与缩小使网页布局发生错乱
热门推荐
weixin_52682014的博客
11-01 1万+
方法1：我们可以对全局和每一个div都写出宽和高来约束他 方法2：可以对主体内容设置一个最小宽度然后在里面固定宽高，这个宽度比电脑的宽度都低不少，一般为1000px左右。(不要忘记给每个大板块加 magin: 0 auto)
缩放页面不影响布局的方法
Y777C的博客
07-20 9159
关于浏览器缩放所引起的页面布局错乱
html浏览器进行缩放百分比 界面和文字保持不变
weixin_45441173的博客
02-17 4156
html浏览器进行缩放百分比 界面和文字保持不变
html怎么设置禁止缩放,css怎么实现禁止缩放
weixin_34540485的博客
06-15 3074
css实现禁止缩放的方法：首先打开相应的前端代码文件；然后在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。本文操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css如何设置不允许页面缩放？css如何设置不允许页面缩放？禁止页面缩放？实际上，在 meta 标签中添加如下两个属性即可：m...
关于 viewport 界面适配不同设备方案： meta 标签 name="viewport" content="width=device-width, initial-scale=1"
weixin_41796631的博客
04-18 3159
什么是 Viewport? viewport 是用户网页的可视区域。1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这...
【每日知识】视口
qq_46580087的博客
02-11 1145
今天我们说到视口，视口在响应式设计中是一个非常重要的概念。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 在移动端浏览器中存在两种视口： 一是可见视口，即设备大小； 二是视窗视口，即网页宽度。 设备屏幕是414pxd 宽度，在浏览器中，414px的屏幕能够显示1200px 的内容。那么，414px 就是可见视口的宽度，而1200px 就是视窗视口的宽度。 为了显示更多的内容，浏览器会通过
记一次meta viewport引起的问题
Fired up &GoGoGo
01-28 1477
最近在项目中需要使用媒体查询来支持多种设备(PC / tablet / mobile)的页面布局， 最开始的时候加入下面的代码并不起效果，最终我们通过查询才知道需要在meta中加入viewport的标签才能让媒体查询生效，仔细阅读过下面的文章觉得写得还是很深入的，贴出来和大家分享一下 @media screen and (max-width: 1100px) and (min-width: 780px) { .signInModule-title { background: blue; }
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 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值