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