在线看黄免费网站,国产亚洲曝欧美

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

傾力總結(jié)40條常見的移動端Web頁面問題解決方案

來源：易賢網(wǎng) 閱讀：889 次日期：2016-06-23 16:00:52

溫馨提示：易賢網(wǎng)小編為您整理了“傾力總結(jié)40條常見的移動端Web頁面問題解決方案”,方便廣大網(wǎng)友查閱！

移動端Web需要照顧觸摸操作的體驗,以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問題,非?，嵥?在這里為大家傾力總結(jié)40條常見的移動端Web頁面問題解決方案,歡迎收看收藏!

1、安卓瀏覽器看背景圖片，有些設(shè)備會模糊。

用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什么呢？

經(jīng)過研究，是devicePixelRatio作怪，因為手機分辨率太小，如果按照分辨率來顯示網(wǎng)頁，這樣字會非常小，所以蘋果當(dāng)初就把iPhone 4的960640分辨率，在網(wǎng)頁里只顯示了480320，這樣devicePixelRatio＝2?，F(xiàn)在android比較亂，有1.5的，有2的也有3的。

想讓圖片在手機里顯示更為清晰，必須使用2x的背景圖來代替img標簽（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然后background-size:contain;，這樣顯示出來的圖片就比較清晰了。

代碼如下:

background:url(../images/icon/all.png) no-repeat center center;

-webkit-background-size:50px 50px;

background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;都可以，大家試試！

2、圖片加載

若您遇到圖片加載很慢的問題，對這種情況，手機開發(fā)一般用canvas方法加載：

具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面舉例說明一個canvas的例子：

js動態(tài)加載圖片和li 總共舉例17張圖片！

var total=17;

var zWin=$(window);

var render=function(){

var padding=2;

var winWidth=zWin.width();

var picWidth=Math.floor((winWidth-padding*3)/4);

var tmpl ='';

for (var i=1;i<=totla;i++){

var p=padding;

var imgSrc='img/'+i+'.jpg';

if(i%4==1){

p=0;

}

tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

var imageObj = new Image();

imageObj.index = i;

imageObj.onload = function(){

var cvs =$('#cvs_'+this.index)[0].getContext('2d');

cvs.width = this.width;

cvs.height=this.height;

cvs.drawImage(this,0,0);

}

imageObj.src=imgSrc;

}

render();

3、假如手機網(wǎng)站不用兼容IE瀏覽器，一般我們會使用zeptojs。zeptojs內(nèi)置Touch events方法，具體可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API，已經(jīng)支持IE10以上瀏覽器，對zeptojs可以選擇使用！

4、防止手機中網(wǎng)頁放大和縮小，這點是最基本的，最為手機網(wǎng)站開發(fā)者來說應(yīng)該都知道的，就是設(shè)置meta中的viewport

還有就是，有些手機網(wǎng)站我們看到如下聲明：

代碼如下:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

設(shè)置了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設(shè)置DTD,直接聲明<!DOCTYPE html>。

使用viewport使頁面禁止縮放。通常把user-scalable設(shè)置為0來關(guān)閉用戶對頁面視圖縮放的行為。

但是為了更好的兼容，我們會使用完整的viewport設(shè)置。

代碼如下:

當(dāng)然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是設(shè)置Web應(yīng)用是否以全屏模式運行。

語法：

說明：

如果content設(shè)置為yes，Web應(yīng)用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網(wǎng)頁是否以全屏模式顯示。

6、format-detection

format-detection 啟動或禁用自動識別頁面中的電話號碼。

語法：

說明：

默認情況下，設(shè)備會自動識別任何可能是電話號碼的字符串。設(shè)置telephone=no可以禁用這項功能。

7、html5調(diào)用安卓或者ios的撥號功能

html5提供了自動調(diào)用撥號的標簽，只要在a標簽的href中添加tel:就可以了。

如下：

<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>

撥打手機直接如下

8、html5GPS定位功能

具體請看：http://www.jb51.net/post/html5_GPS_getCurrentPosition

9、上下拉動滾動條時卡頓、慢

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

10、禁止復(fù)制、選中文本

Element {

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

解決移動設(shè)備可選中頁面文本(視產(chǎn)品需要而定)

11、長時間按住頁面出現(xiàn)閃退

element {

-webkit-touch-callout: none;

}

12、iphone及ipad下輸入框默認內(nèi)陰影

Element{

-webkit-appearance: none;

}

13、ios和android下觸摸元素時出現(xiàn)半透明灰色遮罩

Element {

-webkit-tap-highlight-color:rgba(255,255,255,0)

}

設(shè)置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。

后面一篇文章有詳細介紹，地址：http://www.jb51.net/post/phone_web_ysk

14、active兼容處理即偽類 :active 失效

方法一：body添加ontouchstart

方法二：js給 document 綁定 touchstart 或 touchend 事件

<style>

a {

color: #000;

}

a:active {

color: #fff;

}

</style>

document.addEventListener('touchstart',function(){},false);

</script>

15、動畫定義3D啟用硬件加速

Element {

-webkit-transform:translate3d(0, 0, 0)

transform: translate3d(0, 0, 0);

}

注意：3D變形會消耗更多的內(nèi)存與功耗

16、Retina屏的1px邊框

Element{

border-width: thin;

}

17、webkit mask 兼容處理

某些低端手機不支持css3 mask，可以選擇性的降級處理。

比如可以使用js判斷來引用不同class：

if( 'WebkitMask' in document.documentElement.style){

alert('支持mask');

} else {

alert('不支持mask');

}

18、旋轉(zhuǎn)屏幕時，字體大小調(diào)整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust:100%;

}

19、transition閃屏

/設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D /

-webkit-transform-style: preserve-3d;

/ 設(shè)置進行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏 /

-webkit-backface-visibility:hidden;

20、圓角bug

某些Android手機圓角失效

background-clip: padding-box;

21、頂部狀態(tài)欄背景色

說明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標簽不會起任何作用。

如果content設(shè)置為default，則狀態(tài)欄正常顯示。如果設(shè)置為blank，則狀態(tài)欄會有一個黑色的背景。如果設(shè)置為blank-translucent，則狀態(tài)欄顯示為黑色半透明。如果設(shè)置為default或blank，則頁面顯示在狀態(tài)欄的下方，即狀態(tài)欄占據(jù)上方部分，頁面占據(jù)下方部分，二者沒有遮擋對方或被遮擋。如果設(shè)置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態(tài)欄遮蓋?。〞采w頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。默認值是default。

22、設(shè)置緩存

手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求。如果不希望使用緩存可以設(shè)置no-cache。

23、桌面圖標

iOS下針對不同設(shè)備定義不同的桌面圖標。如果不定義則以當(dāng)前屏幕截圖作為圖標。

上面的寫法可能大家會覺得會有默認光澤，下面這種設(shè)置方法可以去掉光澤效果，還原設(shè)計圖的效果！

圖片尺寸可以設(shè)定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)

24、啟動畫面

iOS下頁面啟動加載時顯示的畫面圖片，避免加載時的白屏。

可以通過madia來指定不同的大小：

25、瀏覽器私有及其它meta

以下屬性在項目中沒有應(yīng)用過，可以寫一個demo測試以下！

QQ瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應(yīng)用模式

UC瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應(yīng)用模式

其它

針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓

微軟的老式瀏覽器

windows phone 點擊無高光

26、 IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

問題是這樣的，用input search做模糊搜索的時候，在鍵盤里面輸入關(guān)鍵詞，會通過ajax后臺查詢，然后返回數(shù)據(jù)，然后再對返回的數(shù)據(jù)進行關(guān)鍵詞標紅。用input監(jiān)聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才能相應(yīng)！

解決辦法：

可以用html5的oninput事件去代替keyup

document.getElementById('testInput').addEventListener('input', function(e){

var value = e.target.value;

});

</script>

然后就達到類似keyup的效果！

27、h5網(wǎng)站input 設(shè)置為type=number的問題

h5網(wǎng)頁input 的type設(shè)置為number一般會產(chǎn)生三個問題，一個問題是maxlength屬性不好用了。另外一個是form提交的時候，默認給取整了。三是部分安卓手機出現(xiàn)樣式問題。

問題一解決，我目前用的是js。如下

function checkTextLength(obj, length) {

if(obj.value.length > length) {

obj.value = obj.value.substr(0, length);

}

問題二，是因為form提交默認做了表單驗證，step默認是1,要設(shè)置step屬性，假如保留2位小數(shù)，寫法如下：

關(guān)于step，我在這里做簡單的介紹，input 中type=number，一般會自動生成一個上下箭頭，點擊上箭頭默認增加一個step，點擊下箭頭默認會減少一個step。number中默認step是1。也就是step=0.01,可以允許輸入2位小數(shù)，并且點擊上下箭頭分別增加0.01和減少0.01。

假如step和min一起使用，那么數(shù)值必須在min和max之間。

看下面的例子：

輸入框可以輸入哪些數(shù)字？

首先，最小值是1，那么可以輸入1.0，第二個是可以輸入（1+3.1）那就是4.1,以此類推，每次點擊上下箭頭都會增加或者減少3.1，輸入其他數(shù)字無效。這就是step的簡單介紹。

問題三，去除input默認樣式

input[type=number] {

-moz-appearance:textfield;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

margin: 0;

}

28、ios 設(shè)置input 按鈕樣式會被默認樣式覆蓋

解決方式如下：

input,

textarea {

border: 0;

-webkit-appearance: none;

}

設(shè)置默認樣式為none

29、IOS鍵盤字母輸入，默認首字母大寫

解決方案，設(shè)置如下屬性

30、select 下拉選擇設(shè)置右對齊

設(shè)置如下：

select option {

direction: rtl;

}

31、通過transform進行skew變形，rotate旋轉(zhuǎn)會造成出現(xiàn)鋸齒現(xiàn)象

可以設(shè)置如下：

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);

transform: rotate(-4deg) skew(10deg) translateZ(0);

outline: 1px solid rgba(255,255,255,0)

32、移動端點擊300ms延遲

300ms尚可接受，不過因為300ms產(chǎn)生的問題，我們必須要解決。300ms導(dǎo)致用戶體驗并不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。

推薦兩個js，一個是fastclick，一個是tap.js

關(guān)于300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/

33、移動端點透問題

案例如下：

<div id="haorooms">點頭事件測試</div>

div是絕對定位的蒙層,并且z-index高于a。而a標簽是頁面中的一個鏈接，我們給div綁定tap事件：

$('#haorooms').on('tap',function(){

$('#haorooms').hide();

});

我們點擊蒙層時 div正常消失，但是當(dāng)我們在a標簽上點擊蒙層時，發(fā)現(xiàn)a鏈接被觸發(fā)，這就是所謂的點透事件。

原因：

touchstart 早于 touchend 早于click。亦即click的觸發(fā)是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發(fā)之后蒙層隱藏，此時 click還沒有觸發(fā)，300ms之后由于蒙層隱藏，我們的click觸發(fā)到了下面的a鏈接上。

解決：

（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。

（2）用fastclick，https://github.com/ftlabs/fastclick

（3）用preventDefault阻止a標簽的click

（4）延遲一定的時間(300ms+)來處理事件（不推薦）

（5）以上一般都能解決，實在不行就換成click事件。

下面介紹一下touchend事件，如下：

$("#haorooms").on("touchend", function (event) {

event.preventDefault();

});

34、消除 IE10 里面的那個叉號

input:-ms-clear{display:none;}

35、關(guān)于 iOS 與 OS X 端字體的優(yōu)化(橫豎屏?xí)霈F(xiàn)字體加粗不一致等)

iOS 瀏覽器橫屏?xí)r會重置字體大小，設(shè)置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

text-size-adjust: 100%;

36、關(guān)于 iOS 系統(tǒng)中，中文輸入法輸入英文時，字母之間可能會出現(xiàn)一個六分之一空格

可以通過正則去掉

this.value = this.value.replace(/\u2006/g, '');

37、移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，由于自動播放網(wǎng)頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會禁止自動播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放。

解決方法思路：先通過用戶 touchstart 觸碰，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）。

解決代碼：

document.addEventListener('touchstart', function () {

document.getElementsByTagName('audio')[0].play();

document.getElementsByTagName('audio')[0].pause();

});

38、移動端 HTML5 input date 不支持 placeholder 問題

這個我感覺沒有什么好的解決方案，用如下方法

代碼如下:

有的瀏覽器可能要點擊兩遍！

39、部分機型存在type為search的input，自帶close按鈕樣式修改方法

有些機型的搜索input控件會自帶close按鈕（一個偽元素），而通常為了兼容所有瀏覽器，我們會自己實現(xiàn)一個，此時去掉原生close按鈕的方法為

#Search::-webkit-search-cancel-button{

display: none;

}

如果想使用原生close按鈕，又想使其符合設(shè)計風(fēng)格，可以對這個偽元素的樣式進行修改。

40、喚起select的option展開

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {

var event;

event = document.createEvent('MouseEvents');

event.initMouseEvent('mousedown', true, true, window);

sltElement.dispatchEvent(event);

};

更多信息請查看網(wǎng)絡(luò)編程

上一篇：JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)

下一篇：頁面向下滾動ajax獲取數(shù)據(jù)的實現(xiàn)方法(兼容手機)

易賢網(wǎng)手機網(wǎng)站地址：傾力總結(jié)40條常見的移動端Web頁面問題解決方案

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2025國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼