今天小編要跟大家分享的是在HTML培訓過程中常見問題集錦，來看看這些問題你中過幾個吧！
鏈接點擊時有邊框
/* android、IOS 點擊一個鏈接時 **會出現一個邊框** 或者半透明灰色遮罩 */a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
不自動識別電話或email。
<!-- 忽略識別號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略識別email -->
<meta content="email=no" name="format-detection">
移動端200-300ms的延遲響應
<!-- 1. fastclick可以解決在手機上點擊事件的300ms延遲 -->
<!-- 2. zepto的touch模塊，tap事件也是為了解決在click的延遲問題 -->
拉動滾動條時延遲或卡頓
/* 上下拉動滾動條時出現 __卡頓、慢__ 情況 */
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;}
禁止復制或選中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;}
長時間按住頁面出現閃退
element { -webkit-touch-callout: none; }
輸入框默認內陰影
/* iphone及ipad下輸入 __框默認內陰影__ */
element{ -webkit-appearance: none; }
某些安卓手機圓角失效
element{ background-clip: padding-box; }
旋轉時字體大小調整
/* 旋轉屏幕時，字體大小調整的問題 */
html, body, p, div {
-webkit-text-size-adjust:;}
按鈕樣式被默認樣式覆蓋
/* ios 設置input 按鈕樣式會被默認樣式覆蓋 */
input,
textarea {
border: 0;
-webkit-appearance: none;
}
默認首字母大寫
<!-- IOS鍵盤字母輸入，默認首字母大寫 -->
<input type="text" autocapitalize="off" />
行高無法垂直居中的問題
/* line-height 在移動端的無法垂直居中的問題 */
html{-webkit-text-size-adjust:none;}
/* 不知道管不管用，還沒試 */
改變placeholder的字體顏色
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
禁止長按觸發系統菜單
/* 禁止ios長按時觸發系統的菜單，以防 ios或者android 長按時下載該圖片 */
.css
/* */{-webkit-touch-callout: none}
下拉選擇設右對齊
/* select 下拉選擇設置右對齊 */
select option {
direction: rtl;
}
動畫定義3D硬件加速
/* */
element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);}
/* 注意：3D變形會消耗更多的內存與功耗 */
Retina屏的1px邊框
element{
border-width: thin;}
transition閃屏
/* */
{/* 設置內嵌的元素在 3D 空間如何呈現：保留3D */
-webkit-transform-style: preserve-3d;
/* 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 */
-webkit-backface-visibility:hidden;}
瀏覽器私有及其它meta
QQ瀏覽器私有 <!-- 全屏模式 -->
<meta name="x5-fullscreen" content="true">
<!-- 強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 強制橫屏 -->
<meta name="x5-orientation" content="landscape">
<!-- 應用模式 -->
<meta name="x5-page-mode" content="app">
UC瀏覽器私有 <!-- 全屏模式 -->
<meta name="full-screen" content="yes">
<!-- 強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 強制橫屏 -->
<meta name="screen-orientation" content="landscape">
<!-- 應用模式 -->
<meta name="browsermode" content="application">
喚起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);
};
判斷手機的類型
var user="";
if (/android/i.test(navigator.userAgent)){
// android
user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
// ios
user="0";
}
判斷是否來自微信瀏覽器
function isFromWeiXin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
}
return false;
}
屏幕旋轉的事件
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
屏幕旋轉時如何操作
/* */
/* 豎屏時使用的樣式 */
@media all and (orientation:portrait) {
.css
/* */{}
}
/* 橫屏時使用的樣式 */
@media all and (orientation:landscape) {
.css
/* */{}
}
video無法自動播放
/* video無法自動播放的問題 | 應對方案：觸屏即播 */
$('html').one('touchstart',function(){
audio.play()
})
手機拍照和上傳圖片
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
輸入時首字母默認大寫
<!-- 取消input在ios下，輸入的時候英文首字母的默認大寫 -->
<input autocapitalize="off" autocorrect="off" />
上去掉語音輸入按鈕
/* android */
input::-webkit-input-speech-button {display: none}
如果在HTML培訓過程中沒有遇到以上問題，說不定工作中會遇到哦，添加粵嵌官網收藏吧，想了解隨時能找到。