user-scalable=no导致部分手机缩放失效

最新推荐文章于 2021-11-02 09:18:35 发布
最新推荐文章于 2021-11-02 09:18:35 发布
阅读量2.1w 收藏 2
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lindir/article/details/53377932
版权

最近与一客户合作，我们的产品以h5的形式集成到别人的App里。客户发给我们测试版的android app，我们给他们链接，然后在他们app里的webview调试

问题来了，我们适配屏幕的方案是采用viewport缩放，算出缩放比，设置scale来做到适配所有机型，这套适配方案在我们的app里也经过了检验，基本没出什么问题，但是客户反馈，720p的手机上，并未缩放。我们测试之后发现，确实如此

于是分析原因，为什么没有缩放，打印出缩放比，确实是没错的。打印出viewport的属性值，也是没错的。在js里重新设置viewport值，仍然是OK的，那为什么缩放并未生效呢？

后来想到会不会是user-scalable=no导致，于是把这个值去掉，结果无效，仍然是一样的。于是设置user-scalable=yes，终于成功

问题虽然解决了，但是却并不知道原因，这个属性应该是控制用户缩放的，但是却导致设置的缩放失效？而且这个缩放问题虽然解决了，但是引起了另一个问题，就是4.3以下的手机，返回webview会变白，必须手触摸一下才会正常，估计也是这个原因引起的。

这个问题先记下，后续开发中看能不能找到原因，同时也决定采用手淘的lib-flexible方案了

lindir
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-native-scalable-image：React Native Image组件，可自动缩放宽度或高度以保持原始宽高比
02-05
react-native-scalable-image通过计算图像大小并在渲染时调整图像大小来解决此问题。 该库提供了组件，该组件会自动缩放宽度或高度以保持纵横比。 如果您不预先知道宽高比（例如，用户上传的内容），但想要显示...
通过viewport实现jsp页面支持手机缩放
10-25
"通过viewport实现jsp页面支持手机缩放"这一主题，正是解决这个问题的关键技术之一。Viewport是浏览器为移动设备提供的一种机制，用于控制网页在小屏幕上如何显示。 首先，我们需要理解什么是viewport。在Web浏览器...
解决使用 user-scalable=no 设置禁止用户缩放，在苹果浏览器下不生效的问题
qq_42386231的博客
06-08 1815
解决使用 user-scalable=no 设置禁止用户缩放，在苹果浏览器下不生效的问题 window.onload = function () { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault();
user-scalable=no 控制手机版浏览器网页分辨率
liuhelong12的博客
11-04 4124
user-scalable=no  将控制用户无法进行触屏扩大或缩小网页，对于一些特殊情况会很有用
<meta name="viewport" content="width=device-width
tianyitianyi1的专栏
06-26 1900
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。       width - viewport的宽度 height - viewport的高度   initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例  user-s
Vue移动端某些浏览器禁止双指缩放(user-scalable=no)失效的解决方案
weixin_42776027的博客
11-02 1873
在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
ios下设置user-scalable=no无效
weixin_30265103的博客
07-17 2558
在ios中屏蔽了meta中user-scalable=no的功能，如果想要实现禁止缩放功能需要通过js去实现 //通过touchstart和touchend window.onload=function () { document.addEventListener('touchstart',function (event) { if(ev...
解决使用 user-scalable=no 设置禁止用户缩放，在苹果Safari浏览器下不生效的问题
zhuang_li_quan的博客
09-27 943
解决方案：index.html window.onload = function () { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }); docu
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
然后，浏览器会将这个虚拟窗口装进手机屏幕上，这样就会导致页面缩放和字迹变小。 三、 meta 标签中的width属性 在meta标签中，width属性有两个含义：一是phys.width，二是虚拟窗口的width。例如，使用meta name=...
haiku-scalable-example:Kubernetes上的可扩展分布式强化学习代理
03-13
haiku-scalable-example 容器编排方面的可扩展强化学习代理 1.项目目的 在像k8s这样的容器乐团系统上实施可扩展的强化学习代理。 2.容器乐团 Kubernetes Google Cloud Platform 3.强化学习算法 英帕拉 A3C ...
Gen-Z-Scalable-Connector-Specification-v1.1.pdf
11-14
Gen-Z Scalable Connector Specification Version 1.1
移动端设置了user-scalable=no，ios双指还能放大问题
qq_40194097的博客
04-25 612
今天突然发现ios 在设置user-scalable=no的情况下还能放大。怎么回事呢？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 原来ios10后meta 没有效果了，用js实现其功能 window.onload=function () { //ios禁止双击缩放 docu
解决iOS10下Meta设置user-scalable=no无效问题
aoxi9939的博客
12-23 891
苹果为了提高Safari中网站的辅助功能，屏蔽了Meta下的user-scalable=no功能 所以在iOS10下面，就算加上user-scalable=no，Safari浏览器也能支持手动缩放 解决这个问题的办法可以用Js监听来阻止手动进行缩放 以下是代码 //通过touchstart和touchend window.onload=function () { ...
解决iOS10的Safari下Meta设置user-scalable=no无效的方法，禁止缩放无效解决方案。。。。...
weixin_30814223的博客
01-23 423
苹果为了提高Safari中网站的辅助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari浏览器也能支持手动缩放。 对于很多开发者来说，这是一个悲催的问题，如何解决，这个网上已经有了。用js加监听事件来阻止手动缩放。 代码如下： <script> window.onload=...
移动端设置了user-scalable=no，怎么用户还能缩放
热门推荐
asparagus888的博客
03-20 4万+
 原因很简单，他前面的只能是逗号，分号就会出错 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0;user-scalable=no"&gt;
移动前端中 viewport （视口）--user-scalable
想飞的猪的博客
09-04 6852
user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。例如： &lt;meta name="viewport" content="user-scalable=no" /&gt; 这只是对user-scalable的简单介绍，具体的移动前端中viewport(视口)，请看 http://www.c...
解决iOS10的Safari下Meta设置user-scalable=no无效的方法
weixin_33671935的博客
02-21 410
苹果为了提高Safari中网站的辅助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari浏览器也能支持手动缩放。 我们可以用js加监听事件来阻止手动缩放。代码如下： window.onload=function () { document.addEventListener('tou...
htm5 user-scalable 的意思
09-13 2万+
user-scalable=yes,minimum-scale=1.0,maximum-scale=1.0"/> width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是
移动先行:initial-scale,user-scalable
Rankis的博客
04-18 508
    Bootstrap2.x系列版本中，在框架里为移动特性添加了一些可选支持。  在Bootstrap3x版本中。作者重新写了与移动相关的内容，与可选特性相比，新版本将移动特性加入了核心框架。实际上，新版Bootstrap是一个移动先行的框架集，移动先行的影子在整个框架集都可以看到。    &lt;meta name="viewport" content="width=device-width...
，user-scalable=no表示禁止用户手动缩放页面 不起作用
最新发布
06-03
如果`user-scalable=no`设置不起作用，可能是因为设备的系统或浏览器对该属性的支持有限。另外，某些浏览器可能会忽略`user-scalable=no`属性，以提高用户体验。 如果你需要完全禁用缩放功能，可以使用JavaScript来实现。具体实现方法如下： ```javascript document.documentElement.addEventListener('touchstart', function(event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function(event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); document.documentElement.addEventListener('gesturestart', function(event) { event.preventDefault(); }, false); ``` 这段代码通过监听`touchstart`、`touchend`和`gesturestart`事件来禁用缩放功能。在`touchstart`事件中，如果用户同时触摸了多个点，则禁止默认行为（即缩放）。在`touchend`事件中，如果两次`touchend`事件的间隔时间小于300毫秒，则禁止默认行为。在`gesturestart`事件中，禁止默认行为。这样设置之后，用户将无法通过手动缩放页面来改变页面的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lindir

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值