信息时代的到来，我们有个第一套电脑，我们预览了第一个网页。现在，我们每人一个手机，方便起见，我们做了手机端的网站，但是手机端有自己的style,对于我们接入的外来户，它会有很大的排斥，所以我们为了能融入这个大家庭，我们必须有手段来对付它，下面是我粗略整理的内容：
1. 手机端 背景图片替换时 会有黑色的边出现 在body中加入：
body{tap-highlight-color: rgba(0,0,0,0);
focus-ring-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-focus-ring-color: rgba(0, 0, 0, 0);}
2.jq找不到body :
a: 解决方案：可以在body下面添加一个与body一样的div标签，然后在jq里找这个div标签
b:解决方案：给body添加样式cursor:pointer 即可
3.限制一行显示：word-break:keep-all;white-space:nowrap;overflow:hidden;
4.placeholder样式
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#ccc;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}
5.input点击去除边框样式：
*:focus { outline: none; }
input {outline:none;}
6.H5页面内容不想被人选中
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none; user-select:none;}
6.h5页面想禁止长按链接或长按图片后弹出菜单
body{
-webkit-touch-callout: none; -ms-touch-callout: none;-moz-touch-callout: none;-o-touch-callout: none;touch-callout: none;}
7.返回上一页
<a class=”go-back” href=”javascript:history.go(-1);”></a>
8.拨打电话
href=”tel:400-123-123″
9.a标签遇上返回上一页时
遇到a标签点击后再点击返回上一步需要点击两次才能到上个页面 解决方案是：a标签不要加href=”#”了 可以去掉 也可以写为：href=”javascrpit:void(0)”
10.苹果手机不兼容new date
var time = new Date(yOrderTimeS.replace(/-/g,”/”));
11.JS辨别访问浏览器判断是android还是ios系统
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
//alert("iphone");
} else if (/android/.test(ua)) {
alert("android");
}
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/240/
微信扫一扫 
支付宝扫一扫 
