前端h5遇到的问题及解决办法

前端h5遇到的问题及解决办法
以后遇到的问题都记录在这⾥。
离子接地棒
1.由于先有的pc端后需求⼿机端,所以没有⽤框架做适配,⽽是⼿动媒体查询进⾏⼿机端、pad、pc 三端适配,界⾯⽐较简单,所以这么做也不复杂,就是坑⽐较多。碟形螺母
2.移动和pad我查的范围是1024px 到200px之间,⽤百分⽐+rem布局。4g手机电子围栏
3.⼩屏幕的适配是通过⼀层容器定位实现铺满全屏,但这样做有两个问题(1)底部链接和备案号位置的固定(2)软键盘弹出会不会挤压界⾯⼤⼩
ei硅钢片>聚乙二醇辛基苯基醚4.固定位置的元素我根据情况判断是否需要固定到底部(但我的这种做法不太科学)是由于我只进⾏了⼀层元素的定位固定。然后导致上述问题的出现。
5.解决:(1)固定的元素要针对上⼀级固定,⽤z-index排列显⽰顺序。(2)软键盘挤压界⾯,曲线救国的⽅法,window触发resize事件的时候,隐藏固定在底部的元素。
6.兼容性:  360安全浏览器6.2版本是IE7的内核,样式有变化,表现在阴影变的很⼤,input输⼊框光标位置不对,输⼊会出现⿊×,可见padding,margin这些没有⽣效,分析应该是盒模型差异导致的。
解决:<meta http-equiv="X-UA-Compatible" content="IE=edge">    意思是强制使⽤最新版本的IE渲染。也试过8,9,但是回到IE浏览器就不⾏了。
结合input伪类  input::-ms-clear{ display:none;width:0;height:0}  ::-ms-reveal{display: none;width:0;height:0;}  后边这个清除IE input的叹号。
7.华为某款⼤屏⼿机不⽀持transform:translateX(-50%)对于这个情况可以⽤margin-left:-50%;解决,这就要考虑元素的宽度了。
染料助剂8.overflow:hidden 属性在⼀些新⼿机上不⽀持,主要是  oppo r9splus + 锤⼦⼿机这些有IE⾏为,-ms 修复。

本文发布于:2024-09-23 20:19:11,感谢您对本站的认可!

本文链接:https://www.17tex.com/tex/1/138048.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:问题   版本   元素   没有   挤压
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议