HTML5常見問題的解決方案

Android Webapp 中 input 聚焦軟鍵盤彈出時，遮住輸入框問題

解決方案：

 在 webview 所在的 activity 中設置屬性 android:windowSoftInputMode="adjustResize"，設置後，輸入框聚焦軟鍵盤彈出時頁面會自動上移，鍵盤不會擋住輸入框。當 activity 處於全屏模式時，該屬性無效。參考連接：http://blog.sina.com.cn/s/blog_71068bbb0101lrpn.html。

  設置以後，鍵盤彈出時，輸入框仍被遮住，請檢查 css 中是否存在以下代碼：

body, html {
  height: 100%;
  overflow: hidden;
}

若有，請去除 overflow:hidden;，去除後，若仍有問題，請檢查輸入框的父容器是否包含 position:fixed 樣式，如有請刪除。

在Android系統中，瀏覽器經過改變 webview 的高度來實現輸入框上移的效果，此時能夠經過 window 高度變化來獲取改變的值；在 ios 系統中，瀏覽器經過滾動視窗來實現輸入框上移的效果，此時能夠經過 document.body.scrollTop 來獲取頁面上移的值。

IPhone 5C iPhone OS 7_0_6 系統，webview 並非經過滾動視窗來實現輸入框的上移，而是經過改變 webview 的高度來實現輸入框上移的效果，並且輸入框聚焦時，document.activeElement 的值是 body，應特別注意。

 

XMLHttpRequest 在設置 withCredentials 時，報 DOM Exception 11 的問題？

解決方案：

問題機型：小米 2S,4.1.1 JRO03L

XMLHttpRequest 設置 withCredentials 屬性的操做放在 open 方法以後。

https://github.com/madrobby/zepto/pull/935

https://github.com/madrobby/zepto/issues/921

 

Android 4.0 webapp 加載本地資源時，資源後面增長參數致使資源沒法加載的問題？

https://code.google.com/p/android/issues/detail?id=17327

http://stackoverflow.com/questions/10066572/adding-parameter-in-link-causes-network-error-android-4-0-3phonegap

 

微信跳轉到第三方 app 失敗的問題？

http://www.zhihu.com/question/24029212

http://jingyan.baidu.com/article/f71d60377d90611ab641d1d0.html?qq-pf-to=pcqq.c2c

 

iframe display:none; 或者 visibility:hidden; 在 ios Safari 無效的問題？

解決方案：

一、對 iframe 設置 z-index

二、使用 width: 0;height: 0;border: none;

三、使用 position: absolute; left: -9999px;

 

tap 事件點透問題？

解決方案：

 

ajax 同步請求跨域不能經過 cookie 維持會話的問題？

解決方案：

改爲異步請求，同步請求 withCredentials 無效。

參考連接：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

 

iOS div 局部滾動卡死的問題？

問題描述：

  一、暴力拖動局部滾動無效的問題

  二、拖動內容時，標題、底部菜單跟隨滾動的問題

解決方案：

確保滾動容器的 scrollTop 不爲 0 、不爲滾動內容的最大值。

 

微信 X5 內核，touchmove 不持續觸發的問題？

解決辦法：

對 touchmove 事件處理函數添加 e.preventDefault() ，便可解決該問題。

 

div 局部滾動卡頓的問題？

解決辦法：

html 或者 body 上的滾動條不存在卡頓的問題，若是能夠，將滾動轉移到 body 或者 html 上。

 

ios 微信修改頁面標題無效問題的解決方案？

解決辦法：

function modifyDocumentTitle (title) {
	var $body = $('body');
	document.title = title;
	// hack在微信等webview中沒法修改document.title的狀況
	var $iframe = $('<iframe src="" style="width:0px;height0px;border:0px;"></iframe>');
	$iframe.on('load', function() {
		setTimeout(function() {
			$iframe.off('load').remove();
		}, 0);
	}).appendTo($body);
}

 

ios 鍵盤彈出後，不點完成致使頁面出現錯亂的問題？

緣由分析：

  出現問題是由於 ios 在鍵盤彈出時，若是鍵盤有可能擋住輸入框，系統會修改 document.scrollTop 的值，來實現頁面上移的效果，非正常關閉鍵盤，該值未正常重置，致使 position 爲 fixed 的元素出現顯示錯亂的問題。

解決方案：

  一、若是非正常關閉致使標題錯亂，取消標題的 fixed 定位

  二、若是非正常關閉致使彈層定位錯亂，添加：document.body.scrollTop = 0; 代碼，重置文檔的滾動值