<meta name="viewport" content="width=device-width

最新推荐文章于 2024-04-24 17:17:21 发布
最新推荐文章于 2024-04-24 17:17:21 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： Jquery Mobile 文章标签： iphone 浏览器 手机 wap
  1. 网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。  
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
  3.   
  4. width - viewport的宽度 height - viewport的高度   
  5. initial-scale - 初始的缩放比例  
  6. minimum-scale - 允许用户缩放到的最小比例   
  7. maximum-scale - 允许用户缩放到的最大比例  
  8. user-scalable - 用户是否可以手动缩放  
小宇丝
关注
专栏目录
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景，通过详解几种属性让读者更明确自适应布局的注意点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
前端基础问题小总结（三）
weixin_45352819的博客
10-13 749
前端基础问题小总结（三） CSS盒子模型由里到外有哪几部分组成？标准盒子模型和IE盒子模型有啥区别？通过什么方式进行转变? 一个盒子模型分成几部分：- 内容区（content）- 内边距（padding）- 边框（border）- 外边距（margin） 标准盒子模型： padding、border所占的空间不在width、height范围内 IE盒子模型： width包括content尺寸＋padding＋border的总和 响应式布局和自应式布局有啥区别？ 响应式布局： 响应式布局就是实现不同屏幕分辨率
移动web必会技能--屏幕适配
qq_31712573的博客
03-08 938
屏幕适配 屏幕适配，一直是作为一个前端开发始终逃不掉的问题，这个话题可以追溯到最开始的PC端浏览器的不同分辨率，再到移动端不同的屏幕尺寸，一直伴随着前端工程师的日常的页面开发工作。所谓屏幕适配，可以理解为一个网页元素或者网页布局，在不同尺寸，分辨率等场景下，如何呈现最佳的效果。 从最早的PC端屏幕来说，大部分的屏幕适配采取的是： 页面框架最外层元素宽度固定，并且居中，高度随内容自适应，比较常见的...
Vue移动端某些浏览器禁止双指缩放(user-scalable=no)失效的解决方案
weixin_42776027的博客
11-02 1978
在index.html头部加上以下代码 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> 在index.html底部加上以下代码 <script> document.documentElement.addEventListener( "touchmove", fun
移动端自适应
hejiaying68的博客
09-25 542
一. 在HTML的头部加入meta标签 　　　　在HTML的头部，也就是head标签中增加meta标签，告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放，代码如下： <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-s...
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 初始的缩放...
html meta viewport属性说明
12-13
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有...meta name=”viewport” content
css3媒体查询中device-width和width的区别详解
11-21
1.device-width 定义：定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。 比如iphone6的device-width*...
viewport 的基本原理以及详细使用方法
12-14
<meta name="viewport" content="width=device-width, initial-scale=1"> ``` 这个标签告诉浏览器将viewport的宽度设置为设备的宽度，并保持初始缩放比例为1，确保页面按比例缩放，以适应不同设备。 除了`width`和`...
html5开发之viewport使用
weixin_34378767的博客
08-30 1166
2019独角兽企业重金招聘Python工程师标准>>> ...
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
user-scalable=no导致部分手机缩放失效
热门推荐
lindir的专栏
11-28 2万+
最近与一客户合作，我们的产品以h5的形式集成到别人的App里。客户发给我们测试版的android app，我们给他们链接，然后在他们app里的webview调试 问题来了，我们适配屏幕的方案是采用viewport缩放，算出缩放比，设置scale来做到适配所有机型，这套适配方案在我们的app里也经过了检验，基本没出什么问题，但是客户反馈，720p的手机上，并未缩放。我们测试之后发现，确实如此 于
解决使用 user-scalable=no 设置禁止用户缩放，在苹果浏览器下不生效的问题
qq_42386231的博客
06-08 1923
解决使用 user-scalable=no 设置禁止用户缩放，在苹果浏览器下不生效的问题 window.onload = function () { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault();
<meta name="viewport" content="width=device-width, initial-scale=1.0">
wuyujin1997的博客
05-17 2944
Code <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, ...
Bootstrap知识点笔记
斗师——Ace
10-15 1035
添加小程序，兑换各种视频教程/数据资源。 1.什么是响应式布局：网页会根据浏览器设备不同自动改变布局； 2.响应式网页必备： （1）流式布局：float:left/right; （2）可以改变尺寸图片/文字大小,如%、auto、em; （3）缺点：不适合大型页面;少用overflow; 3.如何编写响应式网页：常用meta设置横竖屏幕，以及禁止识别电话邮箱&...
一些关于Viewport与device-width的东西～
weixin_30374009的博客
11-01 550
进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。比如： 我们经常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什么意思，...
[移动端] “viewport“ content=“width=device-width, initial-scale=1.0“ 什么意思
最新发布
Madman528的博客
04-24 463
但是总不能写死这个宽度,为了让页面显示完整,可以让视口宽度等于设备宽度。因为默认视口是980px,这个盒子相对980等比缩小就变成这样了。如果你不想别人放大,你可以设置。确保万一 ,最小最大值都设置1。怎么换成移动端就这么小了呢?假如我的视口是400px。布局视口, 代码如下。
seo中meta标签的优化
SAVEmekiss的博客
11-15 700
之前对meta标签的理解只有 <meta charset="UTF-8"> 和移动端适口 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 后来我做了一个页面要求能在百度搜索到 我之前好像知道meta里的标签影响着搜索引擎的SEO。 下面就是总结的常用meta整理 .
meta 标签 viewport content=“width=device-width,initial-scale=1“
weixin_44378370的博客
10-30 2061
<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:
<meta name="viewport" content="width=device-width, initial-scale=1.0">怎么更改
12-31
要更改<meta name="viewport" content="width=device-width, initial-scale=1.0">，您可以按照以下步骤进行操作： 1. 打开您的HTML文件或网页代码编辑器。 2. 找到<meta>标签，其中包含name属性为"viewport"的内容。 3. 将content属性的值更改为您想要的新值。例如，您可以更改width属性为其他像素值，或者更改initial-scale属性为其他缩放比例。 4. 保存您的更改并重新加载网页，以查看更改后的效果。 请注意，更改<meta name="viewport" content="width=device-width, initial-scale=1.0">可能会影响您的网页在不同设备上的显示效果和响应性。确保在更改之前了解所做更改的影响，并进行适当的测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值