meta 标签禁止缩放失效
之前我们能通过设置meta来禁止用户缩放页面
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
但是现在,这个标签在部分浏览器中已经失效。
我在网上查了资料,在ios10+已经失效----
为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以手动缩放。
在Android的自带浏览器中(例如华为,魅族,小米)第一次手动缩放时,会提示--再次操作可强制缩放网页---;再次缩放也可以缩放;
这一现象意味着meta标签的失效。在Android的chrome中不可以用户缩放(表现正常)--------------亲测
各浏览器开发商逐渐允许用户去缩放网页;这就导致我们开发的产品,在缩放后会发生惨不忍睹的情况;尤其是flex布局的组件。
为了解决这一问题;我选择采用js事件监听来阻止用户的缩放
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
}) var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
meta 标签禁止缩放失效的更多相关文章
- Webapp meta标签解决移动缩放的问题
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...
- meta 标签大全
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
- Meta标签介绍
Meta标签写法与作用 meta标签是在HTML网页源代码中一个重要的html标签.meta位于head区的辅助性标签,提供用户不可用的信息. META标签用来描述一个HTML网页文档的属性,例 ...
- HTML页面meta标签内容详解
所有的浏览器都支持meta标签,用于提供页面相关信息,信息都是以名(http-equiv和name标示)/值(content标示)对的形式现实. 属性content,用于定义http-equiv(定义 ...
- meta标签大全
meta标签大全 <!-- x-ua-compatible(浏览器兼容模式) 仅对IE8+以效 告诉浏览器以什么版本的IE的兼容模式来显示网页 <meta ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- 常用meta标签举例说明
本文是作者从百度百科和其他从网页中搜索到的资料,经综合整理,把常用meta标签列举并示例说明,仅供参考. 1.<meta charset="UTF-8"> --- ch ...
- 移动web前端之meta标签
最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...
- HTML Meta标签知多少
文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验 一.基本属性 标签常常被用来定义HTML文档的元数据或者HTTP协议的指向,这些元数据常用在SEO.HTML Pages or ...
随机推荐
- Python知识点整理,基础2 - 列表操作
- mysql-The-server-quit-without-updating-PID-file
mysql 编译后执行 /etc/init.d/mysqld start 启动失败 提示:"The server quit without updating PID file" 排 ...
- 把oracle数据库恢复到某个时间点或者某个scn
alter session set nls_date_format='yyyymmdd hh24:mi:ss'; select sysdate from dual; conn dbauser/1234 ...
- MySQL Lock--并发插入导致的死锁
============================================================================ 测试脚本: 表结构: CREATE TABLE ...
- day8 大纲
01 昨日内容回顾 文件操作 文件操作的流程: 1,打开文件创建文件句柄. 2,对文件句柄进行操作. 3,关闭文件句柄. 读, r r+ rb r+b read() 全部读取 read(n) 读取一部 ...
- 论 数据库 B Tree 索引 在 固态硬盘 上 的 离散存储
传统的做法 , 数据库 的 B Tree 索引 在 磁盘上是 顺序存储 的 , 这是考虑到 磁盘 机械读写 的 特性 . 实际上 , B Tree 是一个 树形结构 , 可以采用 链式 存储 , 就是 ...
- 使用apache cxf实现webservice服务
1.在idea中使用maven新建web工程并引入spring mvc,具体可以参考https://www.cnblogs.com/laoxia/p/9311442.html; 2.在工程POM文件中 ...
- Docker容器里的进程为什么要前台运行?相同的问题:docker运行apache为什么带FOREGROUND参数?docker运行nginx为什么带`daemon off`参数?
<第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数. 例如apache: ENTRYPOINT [ "/usr/sbin/apache2& ...
- jmap获取内存排名靠前的对象
docker部署,jvvm通过jmx访问失败,只能永远是的jdk自带工具查看情况: jmap -histo pid | sort -n -r -k 2 | head -10
- 将spring boot项目部署到tomcat容器中
一. 我这里用的环境 tomcat: tomcat 8 jdk: jdk 7 spring boot 版本: 1.5 二. 将创建好的spring boot项目做如下修改 2.1. 修改打包形式 在p ...