移動端Web頁面常見問題與解決方案（yuyan）

時間 2019-11-17

標籤移動 web 頁面常見問題解決方案 yuyan 欄目無線简体版

原文原文鏈接

1、meta標籤

一、利用meta標籤對viewport進行控制

若是你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

Width ---viewport的寬度 height - viewport的高度

initial-scale--- 初始的縮放比例

minimum-scale ---容許用戶縮放到的最小比例

maximum-scale---容許用戶縮放到的最大比例

user-scalable - 用戶是否能夠手動縮放

二、刪除默認的蘋果工具欄和菜單欄

三、在web app應用下狀態條（屏幕頂部條）的顏色 (iphone設備中的safari私有meta標籤 )

默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）

若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方

四、容許全屏模式瀏覽 (iphone設備中的safari私有meta標籤 )

五、禁止了把數字轉化爲撥號連接

在iPhone上默認將電話號碼變爲超連接（藍色字體）而且點擊這個數字還會自動撥號

2、使用ajax獲取服務器端數據

下面是實際開發中對jquery的$.ajax() 的簡單封裝：

mobile.myAjax=function(api,data,success,error){  $.ajax({        type:'POST',        url:preURL+api,        data:(typeof data==='object')?JSON.stringify(data):data,        contentType:'application/json;charset=UTF-8',        success:success,        error:error || function(){           tips("系統繁忙，請求數據失敗！");         }     });}複製代碼

其中，preURL是服務器的地址前綴，api是接口地址
css

調用實例以下：

mobile.myAjax('cqeye/getProgramInfo',{cid:getId},function(data){if(data.code===0){    console.log(data);    //data即爲返回的數據}else{     tips('獲取數據失敗');  }}複製代碼

3、用click點擊事件會延遲300ms（僅僅限於ios端）

緣由：當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是要進行雙擊縮放，仍是想要進行單擊操做。所以，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。

解決方案：

一、 FastClick是FT Labs專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到click事件的時候，會經過 DOM 自定義事件當即觸發一個模擬 click 事件，並把瀏覽器在 300 毫秒以後真正觸發的click事件阻止掉。

FastClick 的使用方法很是簡單，在 window load 事件以後，在body上調用FastClick.attach()便可。

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

二、使用輕量的移動端類庫，如zepto.js等都支持tap事件來解決這個問題，儘管它們的響應速度比FastClick慢一些

三、解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

觸摸事件的響應順序

一、ontouchstart

二、ontouchmove

三、ontouchend

四、onclick

4、使用相對單位rem

在手機端頁面開發中，通常用百分比設置元素的寬度，用rem相對單位設置高度和字體大小，同時設置根元素html{font-size:50px;}，加上js可實現元素的寬高隨着頁面的寬高變化而變化

js代碼以下：

(function(doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function() {
			var clientWidth = docEl.clientWidth < 720? docEl.clientWidth : 720
	  if (!clientWidth) 
		return;
		docEl.style.fontSize = Math.floor(100 * (clientWidth / 640)) + 'px';
	  };
	 if (!doc.addEventListener) 
			return;
	 win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
複製代碼

這段js代碼當頁面的高度小於720px時，經過改變根元素的font-size來改變元素的高度和字體大小；

5、手機旋轉屏幕事件onorientationchange

小視屏切換到全屏播放時，在頁面添加屏幕方向改變的監聽，調用原生方法後會觸發該監聽，咱們能夠根據屏幕的轉向進行相應操做。

js代碼以下：

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationChange, false);
function orientationChange(){
	var direction=window.orientation;
	if(direction===0||direction===180){
	    //豎屏 portrait
	}else if(direction===-90||direction==90){
	//橫屏 landscape
	}
}
複製代碼

6、自定義返回鍵

有時候單純調用瀏覽器默認的返回方法不能知足實際業務的需求，這時須要用到HTML5的local Storage本身寫返回鍵：在頁面跳轉時把當前頁面的路徑保存到緩存中，再返回時獲取返回的路徑。

頁面跳轉：

function go(url){
	var backURI = location.href;
	var backUrlList = JSON.parse(localStorage['back_url_list'] || '[]');
	var len=backUrlList.length;
	if(backUrlList[len-1]!=backURI){
		backUrlList.push(backURI); //保存當前頁面的地址
	}
	localStorage['back_url_list'] = JSON.stringify(backUrlList)；
	location.href = url;
}複製代碼

function goBack(){
	/* 頁面返回時從緩存中獲取返回地址，獲取不到返回首頁*/
	var backUrlList = JSON.parse(localStorage['back_url_list'] || '[]');
	var backURL = backUrlList.pop() || ('index.html');
	localStorage['back_url_list'] = JSON.stringify(backUrlList);
	var html=location.pathname;
	location.href = backURL;
}
複製代碼

7、圖片懶加載

原理：當訪問一個頁面的時候，先把img元素或是其餘元素的背景圖片路徑替換成一張大小爲1*1px圖片的路徑（這樣就只需請求一次），只有當圖片出如今瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。

js代碼以下：

;(function($){    //分號是避免在代碼合併時和上一部分的代碼合併後出錯
$(window).on('scroll resize load', function(e){
var count = 0, screenHeight = $(window).height();
$('[data-lazy-src]').each(function(){
		var pos = this.getBoundingClientRect();
		// 若是當前圖片在視野上方，繼續往下查找
		if(pos.bottom <= 0) return true;
		// 若是超過2張圖片在視野下方，中止查找，只有圖片佈局從上到下才能這樣判斷
		if(pos.top >= screenHeight) return (count++)<2;
		var src = this.dataset.lazySrc;
		if(!src) return;
		if(this.nodeName === 'IMG') this.src = src;
		else this.style.backgroundImage = 'url(' + src + ')';
		this.removeAttribute('data-lazy-src');
      });
   });
})(jQuery);複製代碼

頁面應用代碼以下：

<div class="sample" style="backgrouond-image:url(images/spacer.gif)" data-lazy-src="images/02.jpg"></div><img class="sample" src="images/spacer.gif" data-lazy-src="images/02.jpg"/>複製代碼

8、文本超出固定行數時隱藏

一、文字超出一行隱藏

.text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .24rem;}

二、文字超出2行隱藏

.text-line2{display: -webkit-box!important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:2;}

9、獲取手勢在一個元素內滑動的距離

js代碼以下:

$('#play-content').on('touchstart',function(e){
     startX = e.originalEvent.touches[0].pageX;
     startY = e.originalEvent.touches[0].pageY;
 }).on('touchmove',function(e){ //左右滑動屏幕
     var endX = e.originalEvent.touches[0].pageX;
     var endY = e.originalEvent.touches[0].pageY;
     var moveX=parseInt(endX - startX);
     var moveY=parseInt(endY - startY);
     var disX=moveX<0?moveX*(-1):moveX; // 滑動的水平距離
     var disY=moveY<0?moveY*(-1):moveY; //滑動的垂直距離
});
複製代碼