Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页

一、背景

  在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,我们往往会遇到一个很尴尬的问题:移动端网页在用户双击屏幕时会变大,导致整个页面的布局错误,非常 影响最终效果,下面介绍一种通过html的meta标签来阻止该现象发生的办法。

二、解决办法和原理

  1.首先设置网页的DOCTYPE

1 <!DOCTYPE html>
2 <html>
3 ....
4 </html>

  2.在网页的 head 之中添加 viewport meta 标签,如下所示:

1 <meta name="viewport" content="width=device-width, 
2                                      initial-scale=1.0, 
3                                      maximum-scale=1.0, 
4                                      user-scalable=no">

  width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

  initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

  user-scalable=no在移动设备浏览器上可以禁用其缩放(zooming)功能。

  maximum-scale=1.0通常情况下与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

三、总结

  这样设置完成以后,我们就完成了阻止移动设备上双击导致网页放大以致网页布局错乱的问题,有木有很开心?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

HTML5干货』响应式布局的设计方法和响应式前端优化

作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。 我们都知道,目...

47012
来自专栏EAWorld

为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。 首先,我们来看一下普元云的总体架构图。 ? 从图中可以看到,在我们普元云平台中,我们最...

4274
来自专栏数据小魔方

创意图表的几种玩法

今天小魔方要放个大招,给大家教几种图表的创意玩儿法。 相信不少小伙伴们在在浏览财经杂志的时候 都看过一些创意图表 里面运用了大量的图标和拟物元素 譬如这张 ? ...

3146
来自专栏编程直播室

《使用 Angular2+ 开发 Markdown 编辑器》提纲

1572
来自专栏BeJavaGod

Java后端实现图片压缩技术(赞赏功能已开通,欢迎测试,噗~!)

今天来说说图片压缩技术,为什么要使用图片压缩,图片上传不就完事了吗?对的,这在几年前可以这么说,因为几年前还没有现在这么大的并发,也没有现在这么关注性能。 如今...

4415
来自专栏知晓程序

开发 | 谁说 LBS 小程序开发难?前端女王大人手把手教会你

利用它,你可以在小程序中调用一个功能完整的地图,让小程序里所展示的地点更直观、更精确。

1112
来自专栏较真的前端

《React in patterns》 中文版来了

1904
来自专栏前端笔记

【WP主题】Kratos 文章样式使用说明 。

为了拓展 WordPress 原有的文章编辑器功能,三哥额外添加了一些配合主题使用的小功能(网易云音乐、优酷视频、腾讯视频、哔哩哔哩、Youtube、进度条、下...

4039
来自专栏ytkah

微信公众平台后台编辑器上线图片缩放和封面图裁剪功能

  今日,微信公众平台后台编辑器又上线了两个更新,图片缩放和封面图裁剪功能,微信团队真喜欢深夜放毒,不想让人睡的节奏。【微信公众平台编辑器可以剪裁和替换正文图片...

4503
来自专栏大数据钻研

前端工程师如何干掉设计

前端是一个承上启下的职位,正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作,而是讲解前端如何更快更便捷的实现一些简单...

3384

扫码关注云+社区

领取腾讯云代金券