標籤:height hid 1.0 off port 屏蔽 hidden 元素 comment
點擊樣式閃動
Q: 當你點擊一個連結或者通過Javascript定義的可點擊元素的時候,它就會出現一個半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color,這個屬性是用於設定元素在行動裝置(如Adnroid、iOS)上被觸發點擊事件時,響應的背景框的顏色。建議寫在樣式初始化中以避免所以問題:div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出現藍色邊框:outline:none;
-webkit-tap-highlight-color : rgba (255, 255, 255, 0) ;// i.e . Nexus5/Chrome and Kindle Fire HD 7 ‘‘-webkit-tap-highlight-color : transparent ;
屏蔽使用者選擇
Q: 禁止使用者選擇頁面中的文字或者圖片
A:代碼如下
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
移動端如何清除輸入框內陰影
Q: 在iOS上,輸入框預設有內部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣關閉:
A:代碼如下
-webkit-appearance: none;
禁止文本縮放
Q: 禁止文本縮放
A:代碼如下
-webkit-text-size-adjust: 100%;
如何禁止儲存或拷貝映像
Q: 如何禁止儲存或拷貝映像
A:代碼如下
img{-webkit-touch-callout: none;}
解決字型在移動端比例縮小後出現鋸齒的問題
Q: 解決字型在移動端比例縮小後出現鋸齒的問題
A:代碼如下
-webkit-font-smoothing: antialiased;
設定input裡面placeholder字型的大小
Q: 設定input裡面placeholder字型的大小
A:代碼如下
::-webkit-input-placeholder{ font-size:10pt;}
audio元素和video元素在ios和andriod中無法自動播放
Q: audio元素和video元素在ios和andriod中無法自動播放
A:代碼如下,觸屏及播放
$(‘html‘).one(‘touchstart‘,function(){audio.play()})
手機拍照和上傳圖片
Q: 針對file類型增加不同的accept欄位
A:代碼如下
<input type="file">的accept 屬性<!-- 選擇照片 --><input type=file accept="image/*"><!-- 選擇視頻 --><input type=file accept="video/*">
輸入框自動填滿顏色
Q: 針對input標籤已經輸入過的,會針對曾經輸入的內容填充黃色背景,這是webkit核心自動添加的,對應的屬性是autocomplete,預設是on,另對應的樣式是input:-webkit-autofill 且是不可更改的。
A:方案如下 1 設定標籤的autocomplete="off",親測無效可能 2 設定盒子的內陰影為你常態的顏色(下面以白色為例)
box-shadow:0 0 0 1000px #fff inset ; -webkit-box-shadow: 0 0 0px 1000px #fff inset;
開啟硬體加速
Q: 最佳化渲染效能
A:代碼如下
-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
使用者佈建字型大小放大或者縮小導致頁面配置錯誤
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; }
移動端去除type為number的箭頭
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }
實現橫屏豎屏的方案
css 用 css3媒體查詢,缺點是寬度和高度不好控制
@media screen and (orientation: portrait) { .main { -webkit-transform:rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); width: 100vh; height: 100vh; /*去掉overflow 顯示正常,但是瀏覽器有問題,豎屏時強制橫屏縮小*/ overflow: hidden; }}@media screen and (orientation: landscape) { .main { -webkit-transform:rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) }}
js 判斷螢幕的方向或者resize事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt, function() { var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; $print = $(‘#print‘); if( width > height ){ $print.width(width); $print.height(height); $print.css(‘top‘, 0 ); $print.css(‘left‘, 0 ); $print.css(‘transform‘ , ‘none‘); $print.css(‘transform-origin‘ , ‘50% 50%‘); } else{ $print.width(height); $print.height(width); $print.css(‘top‘, (height-width)/2 ); $print.css(‘left‘, 0-(height-width)/2 ); $print.css(‘transform‘ , ‘rotate(90deg)‘); $print.css(‘transform-origin‘ , ‘50% 50%‘); } }, false);
RobinsonZhang
連結:https://juejin.im/post/5af918636fb9a07ac5603ecb
來源:掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
移動端常見bug匯總001