1. PmTemple首页
  2. 前端大牛

手机端注意的一丢丢细节

信息时代的到来,我们有个第一套电脑,我们预览了第一个网页。现在,我们每人一个手机,方便起见,我们做了手机端的网站,但是手机端有自己的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/

发表评论

电子邮件地址不会被公开。 必填项已用*标注