css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
2016-11-09 13:39
645 查看
position属性带来的浮动问题:
项目案例:
网宿流量微信公众号活动红包抽奖页面;
问题描述:
在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常
设备:
Android设备存在此问题,而iOS设备显示正常
原因分析:
css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于body元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。
解决方案:
在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
项目案例:
网宿流量微信公众号活动红包抽奖页面;
问题描述:
在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常
设备:
Android设备存在此问题,而iOS设备显示正常
原因分析:
css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于body元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。
解决方案:
在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
相关文章推荐
- css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
- WebSocket 学习笔记--IE,IOS,Android等设备的兼容性问题与代码实现
- WebSocket学习笔记–IE,IOS,Android等设备的兼容性问题与代码实现
- 移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题
- 解决不同浏览器下获取样式的兼容性问题
- CSS、JS在不同浏览器的兼容性问题
- CSS学些心得--解决各个浏览器样式显示的兼容性问题
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
- Html(css)样式控制浏览器的兼容性问题的相关教程
- 根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面
- 不同浏览器之间的javascript和css兼容性问题
- CSS清除ios设备表单按钮自带样式问题
- CSS 在不同浏览器的兼容性问题大集合
- 为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。 当然,初始化样式会对 SEO 有一定的影响,但鱼
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)
- android开发如何更好的解决适配不同屏幕大小移动设备的问题
- 站点改进心得--CSS、JS在不同浏览器的兼容性问题 - []
- 移动设备浏览器HTML5兼容性列表
- css样式兼容性问题的处理办法
- CSS在不同浏览器上的兼容问题