足球各种黑:html5手机端页面可以向右滑动导致样式受影响的问题
发布时间：2018-06-20 15:27:30 作者：soleil阿璐 
我要评论
这篇文章主要介绍了html5手机端页面可以向右滑动导致样式受影响的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题描述
发现写的h5页面在手机端可以向右滑动，导致样式出现问题～
问题排查
原因一：没有进行移动端适配
在html头部添加以下内容：
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
width=device-width表示使页面宽度等于设备的宽度initial-scale=1.0表示初始页面宽度等于1倍设备宽度user-scalable=no表示不可改变
原因二：页面元素宽度超过了设备宽度
在进行了上文的配置后，我的问题并没有解决。通过检查元素发现：我页内的元素(紫色部分)的宽度超过了设备宽度，才导致了页面可以滑动。
在修改了过宽的元素的css后，问题得到了解决。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈移动端网页图片预加载方案 的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-05
这篇文章主要介绍了使用HTML5 IndexDB存储图像和文件的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-05
H5 canvas中width、height和style的宽高区别详解
这篇文章主要给大家介绍了关于H5 canvas中width、height和style的宽高区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需2018-11-02- 这篇文章主要给大家介绍了关于Canvas中设置width与height问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下2018-11-01
html5 postMessage前端跨域并前端监听的方法示例
这篇文章主要介绍了html5 postMessage前端跨域并前端监听的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-01
当今手机种类繁多，所以不可能每一款手机都要写一套布局样式，rem 就是用来自适应布局的，本文就详细的介绍了rem 适配布局，具有一定的参考价值，感兴趣的小伙伴们可以参考2018-10-31
HTML5之消息通知的使用(Web Notification)
通知可以说是web中比较常见且重要的功能，私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈。本篇文章主要介绍了HTML5之消息通知的使用2018-10-30- 这篇文章主要介绍了HTML高亮关键字的实现代码的相关资料，本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办2018-10-22
贪吃蛇是很常见的一种小游戏，这篇文章主要介绍了教你如何一步一步用Canvas写一个贪吃蛇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-22
详解Html5页面实现下载文件（apk、txt等）的三种方式
这篇文章主要介绍了详解Html5页面实现下载文件（apk、txt等）的三种方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-22
最新评论