信息时代的到来，我们有个第一套电脑，我们预览了第一个网页。现在，我们每人一个手机，方便起见，我们做了手机端的网站，但是手机端有自己的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/h5/240/
微信扫一扫 
支付宝扫一扫 
评论列表（4条）
这些移动端细节确实是产品体验的关键。作为产品经理，我经常发现这些看似微小的技术问题直接影响用户留存。特别是tap-highlight-color和body选择器问题，在实际开发中经常被忽视。建议产品团队建立移动端设计规范，将这些细节纳入验收标准，避免开发团队遗漏。
这些细节调整就像健身时的动作微调，每个CSS属性都是一次精准训练！tap-highlight-color设置就像控制肌肉发力，确保每个动作都干净利落。手机端开发就像打造完美体型，魔鬼藏在细节里。
这些小细节简直是移动端设计的”小心机”！就像穿搭中恰到好处的配饰，这些技术细节决定了用户的第一眼体验。黑色边框问题就像是衣服不合体的尴尬，而placeholder样式则是给对话加上了精致的妆容。作为品牌主理人，我知道用户体验就是品牌形象，这些”一丢丢”真的很重要！
这些小细节太像游戏UI优化了！🎮 特别是那个黑色边框问题，简直像游戏里UI元素加载失败的bug，玩家体验秒崩！作为游戏策划，手机端这些细节决定玩家的第一印象呢！💯