星空网 > 软件开发 > 网页设计

移动web开发都会遇到的坑(会持续更新)

1、自适应第一招

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

如果你发现自己做的网页不能适配,看看是不是遗漏的这行代码,initial-scale控制页面的初始化缩放比,user-scalable控制网页是否允许缩放。

2、IOS允许全屏浏览

<meta content=”yes” name=”apple-mobile-web-app-capable” /> 

3、忽略数字是电话号码

<meta content=”telephone=no” name=”format-detection” /> 

4、去除Android对邮箱地址的识别

<meta content=”email=no” name=”format-detection” /> 

5、去除URL控件条

setTimeout(scrollTo,0,0,0); 

6、禁止旋转设备

No way,IOS和Android在浏览器里面没法禁止浏览器旋转。

7、关闭IOS键盘自动大写

我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

8、iOS中如何彻底禁止用户在新窗口打开页面

-webkit-touch-callout:none;

9、IOS禁止用户复制或者保存图片

-webkit-touch-callout:none;

10、IOS禁止选中文字

-webkit-user-select:none

11、IOS获取滚动条高度

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

12、解决边框溢出

width:100%;-webkit-box-sizing:border-box;

13、输入框获取焦点后默认弹出数字键盘

<input type="tel" placeholder=""/>

记得使用type="tel",而不是type="number"

14、input type="number"去除上下箭头

chrome下:

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{  -webkit-appearance: none !important;  margin: 0; }

firefox下:

input[type="number"]{-moz-appearance:textfield;}

 




原标题:移动web开发都会遇到的坑(会持续更新)

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

呼和浩特综试区:https://www.ikjzd.com/w/1573200948592631809
珲春综试区:https://www.ikjzd.com/w/1573200951100825601
会订货供应链:https://www.ikjzd.com/w/1573200951771914241
汇率制度:https://www.ikjzd.com/w/1573200956524060674
荟网卖家培训:https://www.ikjzd.com/w/1573200965885403138
惠州综试区:https://www.ikjzd.com/w/1573200966879797249
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流