手机端网页的几个小问题_html/css_WEB-ITnose
程序员文章站
2024-02-11 22:14:46
...
最近做手机端网页的时候遇到了几个小问题,这个问题出现在安卓2.x里面。
遇到的第一个问题是手机对于overflow:scroll的不支持,在低版本(4.0以前)的安卓里面是不支持overflow:scroll属性的。解决这个问题的方法就是对需要有滚动的元素添加touchstart和touchmove事件,通过判断每次滚动的上一个坐标和这次的坐标的差值来确定滚动方向,同时改变元素的scrollTop(上下滚动)和scrollLeft属性的值。
还有2个小问题:一个是对于圆角的支持不够。圆角属性的值可以取百分比和一般数字。但是有次我看到一个页面中的2个都加了圆角的元素居然一个是圆的,一个还是方的。最后看了下代码后发现,低版本的安卓是不支持圆角的百分比数值的,所以解决这个问题的方法就是不用百分比。另外一个问题就是关于table里的元素的定位问题,有个元素需要绝对定位到td的右上角,如果给td相对定位,绝对定位这个元素,结果在4.0显示正常,到了2.3上面这个元素跑到了浏览器右上角,这个元素相对浏览器定位了,没有参考他的父元素。经过尝试后,我发现这个问题很好解决,就是在td里面加个元素(相对定位),然后需要定位的元素的参考定位的元素就是正确的参考其父元素了。
推荐阅读
-
手机端网页的几个小问题_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
手机端网页设计尺寸_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
手机端网页设计尺寸_html/css_WEB-ITnose
-
移动端开发,几个你可能不知道的CSS单位属性。_html/css_WEB-ITnose
-
一个网页在浏览器里不是全屏 在手机端是全屏_html/css_WEB-ITnose
-
关于移动端的font的大小问题_html/css_WEB-ITnose