做网页,就会碰到手机适配,我学艺不精,有几点拙见总结一下,分享给大家看看.
公司要做一个app,里面有几个网页需要前端来展示.
但是在手机上的显示有问题,ios和安卓的问题还不一样.总结一下.
1, 因为使用到iframe,要嵌套一个网页,也没有别的方法,没有框架,只能用到iframe,但是安卓上显示是没问题的,ios上也能显示,但是放大的功能上是有缺陷的.
后来跟第三方沟通,也跟本公司的人沟通,决定安卓就这样做,ios自己跟后端对接口.
2, 还有一个很大的问题就是,ios的input框不显示光标,我做的努力是
/* 透明度设置为0，去掉点击链接和文本框对象时默认的灰色半
透明覆盖层(iOS)或者虚框(Android) */
/* -webkit-tap-highlight-color: rgba(255, 0, 0, 0.5); */
/* 利用此属性，设置touch时链接区域高亮为50%的透明红，
只在ios上起作用。android上只要使用了此属性就表现为边框。
在body上加此属性，这样就保证body的点击区域效果一致了 */
/* -webkit-appearance: none; * / 注释了
/* //消除输入框和按钮的原生外观，
在iOS上加上这个属性才能给按钮和输入框自定义样式 */
/* 不同type的input使用这个属性之后表现不一。text、button无样式
，radio、checkbox直接消失 */
/* -webkit-user-select: none; */ 注释了
/* //禁止页面文字选择 ，此属性不继承，
一般加在body上规定整个body的文字都不会自动调整 */
-webkit-text-size-adjust: none; 显示
/* //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)
，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整 */
-webkit-touch-callout: none; 显示
/* //禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加 */
-webkit-overflow-scrolling: touch; 显示
/* // 局部滚动(仅iOS5以上支持) */
上网查了好久,还有就是给input加了一个属性,这个也是在网上查的. 把上面的注释了,给input 加上,没搞懂什么意思.
.share .share-form input {
outline: none;
border: none;
font-size: .26rem;
color: #999;
padding: .25rem 0;
-webkit-appearance: none; ---------> 这个
}
3, 然后就是把js重新部署到服务器了,就没问题了,光标也在,也能输入了.(我觉得除了注释样式,加一个样式,我也没做什么就可以用了,也很懵逼.)
4, 把自动聚焦去掉: 产品不用咱们自己自作多情.
5, 对了,给每一个input 加了一个value=' '
之前没写.觉得没必要,现在觉得做兼容性,还是写一下好.
然后ios手机也能正常的显示注册页面了.
费了老劲了,觉得自己没有责任,ios自己修改不了,现在觉得自己可能耐了.
补充
/([^?&=]+)=([^?&]*)/
这个正则是匹配URL后面拼接的参数的,例子:http://yue.huanyueonline.com/dyweb/dyphone/deposit/saleAutumn.html?Ue=MjAxNzEyMDEwMDE=&Ua=NzU0&Ut=MTEyMw==
问号之后的Ue= XXXXX&Ua=XXXX
这个正则的解释:以下:
除了 ？& = 的所有字符 至少有一个 =必须存在 除了？& 的所有字符 0-1次
其他知识点:
image.png
我写了一个点击实现切换的效果,最后一步没有实现,再其他浏览器都可以,就是在微信浏览器不可以实现消失的效果,跟安卓沟通了之后他说,因为你上面已经清空了,渲染机制决定了下面的没办法执行,所以我就换了一下顺序,然后就可以执行了,这么神奇.
也是很懵逼.
网友评论