1：小bug處理
安卓手機(jī)上點(diǎn)擊a標(biāo)簽會(huì)有陰影出現(xiàn)，處理的方式為在body和element上加上下面這幾句css樣式
body{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);
}
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
移動(dòng)端禁止頁面縮放
<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
禁止頁面把數(shù)字當(dāng)成電話號(hào)碼
<meta name="format-detection" content="telephone=no" />
禁止微信瀏覽器調(diào)整頁面字體大小
body{
/*禁止微信內(nèi)置瀏覽器調(diào)整字體大小*/
-webkit-text-size-adjust: 100% !important;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}
禁止用戶選中頁面文字
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}
<body onselectstart="return false;"></body>
在iphone關(guān)閉長按圖片保存圖片彈窗
img {
-webkit-touch-callout: none;
}
設(shè)置輸入框placeholder字體樣式
::-moz-placeholder { color: #A9A9A9; font-family: "PingFangTC-Light";}
::-webkit-input-placeholder { color:#A9A9A9; font-family: "PingFangTC-Light";}
::-ms-input-placeholder { color:#A9A9A9; font-family: "PingFangTC-Light";}
在ios中 輸入框的光標(biāo)發(fā)生位移，上移或者下移，解決方法是不要設(shè)置line-height
2：在微信瀏覽器中，鏈接到appstore的跳轉(zhuǎn)全都被屏蔽了
解決辦法一是通過跳轉(zhuǎn)到騰訊的微應(yīng)用（應(yīng)用寶）中，才能通過它接著跳轉(zhuǎn)到appstore，但是應(yīng)用寶規(guī)定，必須把a(bǔ)pp上傳到他們平臺(tái)審核通過后才能有這個(gè)功能，和蘋果商店類似，但是如果沒有安卓版本的app，只有ios版本的話也不可以。也就是說要在應(yīng)用寶上傳安卓和蘋果的app才能用應(yīng)用包的這個(gè)功能。
解決辦法二是當(dāng)用戶點(diǎn)擊下載按鈕之后提示用戶在瀏覽器中打開，只要不是微信瀏覽器，其他瀏覽器都可以跳轉(zhuǎn)到appstore下載app?，F(xiàn)在大部分的公司是這樣做的。
解決辦法三是掃描二維碼進(jìn)行跳轉(zhuǎn)，這在微信瀏覽器中是可以的，把鏈接生成二維碼的網(wǎng)站一大堆，隨便百度一個(gè)就可以了，當(dāng)用戶點(diǎn)擊下載按鈕之后，彈出二維碼供用戶掃描。但是問題來了，如果圖片不大的話，長按圖片是出不來掃描圖中二維碼那個(gè)按鈕的。解決辦法就是再設(shè)置一個(gè)全屏的二維碼，讓它的透明度為0，當(dāng)用戶長按時(shí)，其實(shí)是點(diǎn)的大的二維碼，這樣隨便按哪都會(huì)彈出來掃描圖中的二維碼那個(gè)按鈕。。。（本人也是這樣做的）
3：
在ios移動(dòng)端瀏覽器中，如果給視頻video不設(shè)置controller的話，視頻播放控件依舊會(huì)顯示出來，很丑，解決辦法就是用一個(gè)蒙版蓋住視頻，自己寫播放按鈕在上面，讓視頻的透明度為0，給包裹video標(biāo)簽的div設(shè)置背景圖片，當(dāng)點(diǎn)擊播放時(shí)，才讓視屏的透明度為1，這樣就好看多了。?！，F(xiàn)在一些大的科技公司就是有自己的播放器插件，也就是模擬視頻播放器，這樣就可以隨心所欲的改變視頻播放器的樣式了。
4：（不同的手機(jī)屏幕適配問題）
我相信身為一名前端開發(fā)攻城獅剛開始最頭疼的應(yīng)該是手機(jī)適配問題了，怎樣才能讓自己寫的頁面在各種手機(jī)上都能達(dá)到一致效果沒有固定的解決方法，各位童鞋可以根據(jù)自己的需要來進(jìn)行適配，下面分別為幾種適配方法：
（1）使用媒體查詢的方式，在頁面的css中加入以下代碼：
@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}
`
但是對(duì)于橫屏是不好處理，判斷橫豎屏的媒體查詢?yōu)椋?`@media all and (orientation : landscape) {
h2{color:red;}/*橫屏?xí)r字體紅色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*豎屏?xí)r字體綠色*/
}
（2）使用百分比布局：
不同的手機(jī)有著不同的分辨率，這時(shí)再用我們pc端布局常用的px就不合適了。使用百分比布局要時(shí)時(shí)刻刻清楚其父元素，因?yàn)樽釉氐陌俜直雀叨仁歉鶕?jù)父元素的高度來確定的，當(dāng)父元素的高度為不確定值時(shí)，或者說父元素的高度未定義時(shí)，子元素的高度百分比將沒有用（沒有參照物）。所以只有設(shè)置了父元素的高度，子元素的高度百分比才會(huì)有用。
通常使用百分比布局的人不多，因?yàn)橛?jì)算太麻煩了。
（3）單位使用em與rem
em是根據(jù)相對(duì)單位，不是固定的，他會(huì)繼承父級(jí)元素的字體大小，若沒有父級(jí)則em的相對(duì)基準(zhǔn)點(diǎn)為瀏覽器的字體大小，瀏覽器的字體默認(rèn)為16px，因此若無父級(jí)元素，相對(duì)于瀏覽器大小：Xem=X*16px; rem是css3新增屬性，是完全相對(duì)于HTML根元素大小設(shè)定的，默認(rèn)為10px，因此無論父級(jí)字體大小，1rem=10px。所以可以根據(jù)屏幕的大小來動(dòng)態(tài)的改變html的字體大小，然后使用rem為單位就可以進(jìn)行適配了，改變?yōu)g覽器字體的代碼為：
function resetHtmlFont(){//改變?yōu)g覽器字體大小
var HTML= document.getElementsByTagName('html')[0];
var deviceWidth = document.documentElement.clientWidth;
var scale = deviceWidth/640;
HTML.style.fontSize =( 100 \* scale)+'px';//乘以100的目的是瀏覽器最小的字體大小為12px,所以會(huì)出現(xiàn)屏幕過小會(huì)不執(zhí)行，這樣就可以按照正常的px大小除以100就是rem的值了
}
function resize(){
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone豎屏；Andriod橫屏
resetHtmlFont();
orientation = 'landscape';
return false;
} else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone橫屏；Andriod豎屏
resetHtmlFont();
orientation = 'portrait';
return false;
}
}
//window.addEventListener("orientationchange",function(){//手機(jī)橫屏或者豎屏事件
// resize();
//});
window.onresize = window.onorientationchange = function(){
resize();
}
resize();
但是這個(gè)如果在電腦端打開的話，屏幕多大就會(huì)多大，如果需求是在PC端打開也和移動(dòng)端一樣的話，用這種方法還得加一個(gè)判斷，就是：
if (deviceWidth >=750) {//如果屏幕寬度大于750px的話，讓deviceWidth為750 deviceWidth = 750; }
把這段加到resetHtmlFont這個(gè)函數(shù)里就可以了。
（4）柵格布局&&彈性布局
box-sizing:border-box;可以改變盒子模型的計(jì)算方式方便你設(shè)置寬進(jìn)行自適應(yīng)流式布局。
彈性布局為CSS3新出現(xiàn)的屬性，簡單的用法看下面一個(gè)例子：
<ul class="flex-container">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
上面的html結(jié)構(gòu)為一個(gè)彈性布局的ul標(biāo)簽內(nèi)包含了4張400*400的圖片，css代碼為：
.flex-container {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
padding: 5px;
}
關(guān)于css3的彈性布局這里不必多說，具體的可以產(chǎn)靠這篇博文，寫的不錯(cuò)。
深入理解css3彈性盒布局
（5）動(dòng)態(tài)的改變頁面的zoom值（和第三個(gè)類似）
開發(fā)者也可以根據(jù)屏幕的大小來動(dòng)態(tài)的改變頁面的zoom值來進(jìn)行適配，具體的思路和第三個(gè)方法類似，就是動(dòng)態(tài)的控制頁面的縮放，具體的代碼為：
function resetHtmlFont(){//改變?yōu)g覽器字體大小
var deviceWidth = document.documentElement.clientWidth;//獲取設(shè)備寬度
var scale = deviceWidth/640;//640是psd設(shè)計(jì)圖寬度
document.body.style.zoom = scale;
}
function resize(){
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone豎屏；Andriod橫屏
resetHtmlFont();
orientation = 'landscape';
return false;
} else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone橫屏；Andriod豎屏
resetHtmlFont();
orientation = 'portrait';
return false;
}
}
//window.addEventListener("orientationchange",function(){//手機(jī)橫屏或者豎屏事件
// resize();
//});
window.onresize = window.onorientationchange = function(){
resize();
}
resize();
(6)動(dòng)態(tài)的改變頁面的viewport來進(jìn)行適配
個(gè)人覺得動(dòng)態(tài)的改變頁面的viewport值來進(jìn)行適配是比較好的解決方案，包括本人以及很多大公司都在使用這種方法，這種方法的具體思路是通過js動(dòng)態(tài)的改變頁面的viewport來控制頁面的顯示區(qū)域進(jìn)行適配，我們公司有個(gè)大神寫了一個(gè)基于jquery的動(dòng)態(tài)改變viewport的插件，通熟易懂，引入完jq再引入這個(gè)文件就可以適配了，無需進(jìn)行別的操作，其它的布局什么的直接按照PC端的來寫就可以了，下面來貼出代碼：
+function(){
adaptUILayout()
function adaptUILayout(){
var deviceWidth,
devicePixelRatio,
targetDensitydpi,
//meta,
initialContent,
head,
viewport,
ua;
ua = navigator.userAgent.toLowerCase();
//whether it is the iPhone or iPad
isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;
//設(shè)置像素比
devicePixelRatio = window.devicePixelRatio;
devicePixelRatio < 1.5 ? 2 : devicePixelRatio;
if(window.orientation == 0 || window.orientation == 180){//ios的橫屏，安卓的豎屏
if(window.screen.width < window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}else{//ios的豎屏，安卓的橫屏
if(window.screen.width > window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}
//動(dòng)態(tài)的改變像素比
if(devicePixelRatio==2 && (deviceWidth==320 || deviceWidth==360 || deviceWidth==592 || deviceWidth==640)){
deviceWidth*=2;
}
if(devicePixelRatio==1.5 && (deviceWidth==320)){
deviceWidth*=2;
devicePixelRatio = 2;
}
if(devicePixelRatio==1.5 && (deviceWidth==750)){
devicePixelRatio = 2;
}
//設(shè)置設(shè)備的獨(dú)立像素比api
targetDensitydpi = 750 / deviceWidth * devicePixelRatio * 160;
創(chuàng)建meta標(biāo)簽
initialContent = isiOS
? 'width=' + 750 + 'px, user-scalable=no, minimal-ui'
: 'target-densitydpi=' + targetDensitydpi + ', width='+ 750 +', user-scalable=no';
$("#viewport").remove();
var head = document.getElementsByTagName('head');
var viewport = document.createElement('meta');
viewport.name = 'viewport';
viewport.id = 'viewport';
viewport.content = initialContent;
head.length > 0 && head[head.length - 1].appendChild(viewport);
}
$(window).bind( 'orientationchange', function(e){
adaptUILayout()
});
}();
（7）使用css3的transiform的scale來改變頁面的縮放值
對(duì)于一般的web展示頁面，dom結(jié)構(gòu)不算復(fù)雜的話可以使用css3的scale來動(dòng)態(tài)的收縮頁面，比我上面提到的動(dòng)態(tài)的改變zoom值要流暢很多，騰訊里面的好多簡單頁面就是采用的這種方法，具體的思路和代碼為：
var autoScale = function() {
var ratio = 320/504, //原設(shè)計(jì)稿的寬高比（504是iPhone5的高度去掉標(biāo)題欄高度）
winW = document.documentElement.clientWidth,
winH = document.documentElement.clientHeight,
ratio2 = winW/winH,
scale;
if (ratio < ratio2) {
scale = (winH/504).toString().substring(0, 6);
}else{
scale = (winH/504).toString().substring(0, 6);
}
var cssText = "-webkit-transform: scale("+ scale +"); -webkit-transform-origin:top; opacity:1;";
$("body").attr('style', cssText);//如果給body添加不可以，就給一個(gè)最外層的div添加
};
//設(shè)定一定時(shí)間保證獲取頁面寬高正確
setTimeout(function(){
if (document.documentElement.clientWidth/document.documentElement.clientHeight !== 320/504) {
autoScale();
}
},300);
//橫屏豎屏切換
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', autoScale, false);
具體的可以參考：騰訊ISUX
