bug虐我千百遍，我待bug如初恋；
今天整理了一下前端常用的代码片段，相信你肯定能需要的到~
一、关于移动端1px问题
前端这个活，真的是被产品虐到脑海中每天都有上千只小动物飘过，然而不让你省心的还有UI，总是跑过来告诉你，“你这和我设计图不一样呀？我这是1px，你这设备上显示的是2px”，然而，你能怎么办，改吧，笔者给你整理几种解决办法，让你扬眉吐气。
先说原因
写过移动端的小伙伴都知道，在页面的开头，我们都会加一个viewport，然而viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长，所以1px看上去就变宽了。
解决办法有很多，但是我这里介绍两个最方便且常用的
第一种，flexible.js（后续不断更新其他方法）
引入flexible.js 加上rem布局，那可是对于移动端开发方便了不少，根据不同的设备是可以达到前端开发对页面的要求的，所以引入这个js，在处理1px问题的时候，只需要正常书写1px就可以了，而且你 不需要再添加<meta name="viewport">等等，因为这个js都帮你动态的添加好了，是不是很方便，来来来，举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src=http://i0.jrjimg.cn/zqt-red-1000/focus/focus_zixuangu/flexible.js></script>
<style type="text/css">
.onePx{width: 1rem;height: 1rem;border: 1px solid red;background: skyblue;margin:0 auto;margin-top: 2rem;}
</style>
</head>
<body>
<div class="onePx">
</div>
</body>
</html>
效果
二、关于文本的溢出隐藏
这个是前端使用频率极高的一段代码，可选择自行收藏，记得给标签设置宽度哦~
单行文本溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
width: 300px;
overflow: hidden;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
</style>
</head>
<body>
<div class="one">
哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
</div>
</body>
</html>
效果
多行文本溢出显示省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="one">
哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
</div>
</body>
</html>
效果
三，关于使用overflow：hidden，在ios下卡顿的问题解决
这个问题可是找到解决办法的我眼泪掉下来，尝试了n中方法，什么用swipter之类的，但是最后效果都不好，结果最终的解决办法就是一行代码
在css 属性上添加 -webkit-overflow-scrolling: touch;
效果我就不演示了，肯定超过你的预期。小伙伴可以在ios中前端开发时但用无妨。
四，判断用户设备
h5前端开发的时候，经常需要安卓和ios各种适配，经常书写的一段代码就是要判断用户设备，从而在不同的设备上执行不同的代码。so，还是记下无妨
var u = navigator.userAgent.toLowerCase();;
if (u.indexOf('android') > -1 || u.indexOf('linux') > -1) {
//安卓手机
} else if (u.indexOf('iphone') > -1) {
//苹果手机
} else if (u.indexOf('windows phone') > -1) {
//winphone手机
}
五，判断页面的打开环境，同时区别站内站外
开发的时候，有时候需要区别是在用户是在app里打开的，还是在手机浏览器里打开的，从而判断用户是能直接进行更深入的操作还是直接点击按钮进入app下载页
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
//判断之后即可进行操作
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
}
if (ua.match(/WeiBo/i) == "weibo") {
}
if (ua.match(/QQ/i) == "qq") {
}
if (browser.versions.ios) {
}
if(browser.versions.android){
}
六，ios下动态改动h5页面title
有时候，根据需要，我们经常需要动态的更改ios页面的title，所以经常是在接口中返回信息之后我们才知道页面的title是撒，但是此时dom已基本加载完毕，ios下更改title就费尽了，不过笔者亲测有效
document.title = "我是接口返回的页面title";
if (/ip(hone|od|ad)/i.test(navigator.userAgent)) {
var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() {
setTimeout(function(){
i.remove();
}, 0)
}
document.body.appendChild(i);
}
七，好用的小效果
比如点击页面上的电话号码，可直接提示拨号；
比如点击页面上的短信，可直接提示发短信；
比如点击页面上的邮箱，可直接提示发邮件；
1、<a href="tel:400-888-6633">拨打电话<a>
2、<a href="sms:19956321564">发送短信<a>
3、<a href="mailto:mail@mail.com">发送邮件<a>
本该出去浪，又加班一天，555~~
