bug虐我千百遍，我待bug如初戀；
今天整理了一下前端常用的代碼片段，相信你肯定能需要的到~
一、關(guān)于移動端1px問題
前端這個活，真的是被產(chǎn)品虐到腦海中每天都有上千只小動物飄過，然而不讓你省心的還有UI，總是跑過來告訴你，“你這和我設(shè)計圖不一樣呀？我這是1px，你這設(shè)備上顯示的是2px”，然而，你能怎么辦，改吧，筆者給你整理幾種解決辦法，讓你揚眉吐氣。
先說原因
寫過移動端的小伙伴都知道，在頁面的開頭，我們都會加一個viewport，然而viewport的設(shè)置和屏幕物理分辨率是按比例而不是相同的. 移動端window對象有個devicePixelRatio屬性, 它表示設(shè)備物理像素和css像素的比例, 在retina屏的iphone手機上, 這個值為2或3, css里寫的1px長度映射到物理像素上就有2px或3px那么長，所以1px看上去就變寬了。
解決辦法有很多，但是我這里介紹兩個最方便且常用的
第一種，flexible.js（后續(xù)不斷更新其他方法）
引入flexible.js 加上rem布局，那可是對于移動端開發(fā)方便了不少，根據(jù)不同的設(shè)備是可以達(dá)到前端開發(fā)對頁面的要求的，所以引入這個js，在處理1px問題的時候，只需要正常書寫1px就可以了，而且你 不需要再添加<meta name="viewport">等等，因為這個js都幫你動態(tài)的添加好了，是不是很方便，來來來，舉個栗子
<!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>
效果
二、關(guān)于文本的溢出隱藏
這個是前端使用頻率極高的一段代碼，可選擇自行收藏，記得給標(biāo)簽設(shè)置寬度哦~
單行文本溢出顯示省略號
<!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>
效果
三，關(guān)于使用overflow：hidden，在ios下卡頓的問題解決
這個問題可是找到解決辦法的我眼淚掉下來，嘗試了n中方法，什么用swipter之類的，但是最后效果都不好，結(jié)果最終的解決辦法就是一行代碼
在css 屬性上添加 -webkit-overflow-scrolling: touch;
效果我就不演示了，肯定超過你的預(yù)期。小伙伴可以在ios中前端開發(fā)時但用無妨。
四，判斷用戶設(shè)備
h5前端開發(fā)的時候，經(jīng)常需要安卓和ios各種適配，經(jīng)常書寫的一段代碼就是要判斷用戶設(shè)備，從而在不同的設(shè)備上執(zhí)行不同的代碼。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手機
}
五，判斷頁面的打開環(huán)境，同時區(qū)別站內(nèi)站外
開發(fā)的時候，有時候需要區(qū)別是在用戶是在app里打開的，還是在手機瀏覽器里打開的，從而判斷用戶是能直接進行更深入的操作還是直接點擊按鈕進入app下載頁
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移動終端瀏覽器版本信息
trident: u.indexOf('Trident') > -1, //IE內(nèi)核
presto: u.indexOf('Presto') > -1, //opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核
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應(yīng)該程序，沒有頭部與底部
};
}(),
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下動態(tài)改動h5頁面title
有時候，根據(jù)需要，我們經(jīng)常需要動態(tài)的更改ios頁面的title，所以經(jīng)常是在接口中返回信息之后我們才知道頁面的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);
}
七，好用的小效果
比如點擊頁面上的電話號碼，可直接提示撥號；
比如點擊頁面上的短信，可直接提示發(fā)短信；
比如點擊頁面上的郵箱，可直接提示發(fā)郵件；
1、<a href="tel:400-888-6633">撥打電話<a>
2、<a href="sms:19956321564">發(fā)送短信<a>
3、<a href="mailto:mail@mail.com">發(fā)送郵件<a>
本該出去浪，又加班一天，555~~
