手机端页面padding-left,padding-right或margin-left,margin-right会使页面左右摇晃
来源:互联网 发布:百度域名备案需要多久 编辑:程序博客网 时间:2024/05/16 01:30
最近在做一个类似赚一兜应用的分享网页,需要适配到手机端,遇到一个问题,就是如果设置文章的padding-left,padding-right或margin-left,margin-right时,手机上查看手指触摸滑动会左右摇晃页面,试过各种方法,最后才发现漏了一句代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。
对于此标签还有以下需要分享:
1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。
3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。
- 手机端页面padding-left,padding-right或margin-left,margin-right会使页面左右摇晃
- width、margin-left、margin-right使用auto
- margin-padding-left-top百分比算法
- margin-left:(外边距)与padding-left:(内边距)
- margin: left right /top bottom的怪异
- IE3像素bug 非float元素使用了margin-left或margin-right
- java字符串拼接指定内容-左右组合(left/right padding)
- padding margin
- padding&margin
- margin padding
- html-css表单的margin-right/padding-right属性设置无效解决办法
- IE下input text在字符超出文本框长度时,padding-left和padding-right失效
- IE下input text在字符超出文本框长度时,padding-left和padding-right失效
- 【记】IE下input标签中的padding-left和padding-right
- IE和ff 对margin-left 和margin-right的兼容解决办法
- div#container{ margin-left:auto; margin-right:auto; width:168px; }
- 外边距margin-top right bottom left 设置方法 如果margin只设置两个值
- div+css - CSS标准 - 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性
- 黑马程序员_Java基础_IO流(File类和properties类相关操作)
- 于画线函数Glib_Line算法的研究
- ejb
- 若要出于兼容性原因而启用 CAS 策略,请使用 NetFx40_LegacySecurityPolicy 配置开关
- QScrollArea无法自动增大问题
- 手机端页面padding-left,padding-right或margin-left,margin-right会使页面左右摇晃
- 想成为最牛B的程序员吗?
- 高清动漫mm赏析(五)
- AMR音频编码器概述及文件格式分析 (2)
- ZipFile解压文件
- 黑马程序员_JAVA学习日记_JAVA中图形化界面GUI编程
- 域渗透相关
- paip.图片文件上传功能总结
- 【100题】第四十九题 排序,要求时间复杂度O(n),空间复杂度O(1)