记录自己在h5页面中遇到的坑

虽然自己在开发中主要以开发web页面为主,但是也不乏做一些移动端页面。

在开发页面过程中就会遇到很多意想不到的坑 , 因此在这记录下来。

1 。 在开发中遇到背景放置一个长的背景图   , 将他绝对定位 给宽高 , 给body加个overflow:hidden;  给图片加overflow-y:scroll; 实现了  但是在滚动到最底部以后发现图片下面留有一小块空白,,蛋疼,,,,最后解决办法  给img标签 加了个属性 display:block;;


2 。 需要在页面绝对定位一个div.  position:fixed ;;于是乎定位到距屏幕某个固定的位置了

但是不要高兴得太早啊,当你去拖动手机屏幕的时候你就会发现绝对定位的这个元素会在滑动的时候会晃动

非常不友好,,也是百度解决的在这记录一下。

第一种办法 给绝对定位的元素添加css样式

-webkit-transform:translateZ(0)

第二种办法

html, body {height:100%;overflow:auto;margin: 0;}

能会导致原来的页面布局出现问题,慎重。我


3 在当背景图片是一张大图的时候  点击一下图片的时候会出现预览图  这样也是很不友好的

于是乎  给放图片的容器加一个点击事件  onclick="return false;" 阻止一下默认行为


总之在进行移动端页面布局的时候坑还是很多的 在这记录一下 后续会一直更新的



猜你喜欢

转载自blog.csdn.net/qq_40650146/article/details/80587336