移動端HTML5開發問題匯總-樣式篇

本文轉載自查看原文 2016-11-03 23:38 1497 移動開發

問題：Android 上圓形圖片使用 border 時，邊框顯示變形

圓形圖片邊框變形

解決：給 img 外嵌套一個元素，為其使用圓角

<div> <img src=""> </div>

div{ display: inline-block; border-radius: 50%; border: 4px solid #FF7000; } img{ vertical-align: top; }

問題：Android 上圓角元素，背景顏色會溢出

背景色溢出

解決：

{ background-clip: padding-box; }

問題： Android 上圓角使用 Animation 做 loading 動畫時，圓角背景色溢出的bug

圓角溢出解決圓角溢出

解決：

{ background-color: #F9CEAC; border-radius: 32px 0 0 32px; -webkit-mask-image: url(http://i.gtimg.cn/qqlive/images/20150527/btn_mask.png); }

原理是使用一個圓角的蒙板通過 -webkit-mask-image 遮住多余的部分。蒙板：圓角蒙板

問題：CSS 三角在 Android 上顯示為方塊

解決：可能是對這個三角使用了圓角，去掉 border-radius 即可

{ border: 10px solid transparent; border-left-color: #000; /*border-radius: 2px;*/ }

問題： Android 上使用 svg 作為 background-image 時顯示模糊

解決：設置 background-size

{ -webkit-background-size: 100%; background-size: 100%; }

問題： :active 樣式不生效

元素 active 樣式

解決：參考這篇文章

document.addEventListener("touchstart", function() {},false);

問題：多行文字超出截斷需要出現省略號

多行文本的超出隱藏省略號

解決：參考這篇文章

{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

問題： 1px 線條、邊框

1像素邊框

解決：使用高度為 1px ，一半為實色，一半為透明的漸變背景實現

{ background: -webkit-linear-gradient(top, transparent, transparent 50%, #CACDD0 50%) 0 top no-repeat; background-size: 100% 1px; }

如果需要有四個邊框都有 1px 的線框，可以使用多背景圖

{ background: -webkit-linear-gradient(top, #CACDD0, #CACDD0 50%, transparent 50%, transparent 100%) 0 top no-repeat,-webkit-linear-gradient(top, transparent, transparent 50%, #CACDD0 50%, #CACDD0 100%) 0 bottom no-repeat, -webkit-linear-gradient(left, #CACDD0, #CACDD0 50%, transparent 50%, transparent 100%) left 0 no-repeat, -webkit-linear-gradient(left, transparent, transparent 50%, #CACDD0 50%, #CACDD0 100%) right 0 no-repeat; background-size: 100% 1px,100% 1px, 1px 100%, 1px 100%; }

問題：滾動條滾動時沒有像 iOS 原生那么順滑流暢，滾動條沒有 iOS 回彈效果

iOS 滾動條

解決：

{ overflow: auto; -webkit-overflow-scrolling: touch; }

注：在 Android 上由於原生滾動沒有回彈效果，所以這里也不會有回彈的效果。

問題：當模塊使用系統的橫向滾動時，不想顯示出系統的滾動條樣式

隱藏滾動條

解決：

Android：

::-webkit-scrollbar{ opacity: 0; }

iOS 要隱藏滾動條，會稍微復雜一些

<div class="wrap"> <div class="box"></div> </div>

.wrap{ height: 100px; overflow: hidden; } .box{ width: 100%; height: -webkit-calc(100% + 5px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

原理：.box 元素的橫向滾動條通過其外層元素 .wrap 的 overflow:hide 來隱藏。（5px 是 iOS 上滾動條元素的高度）

問題：橫向滾動的元素，滑動時有時圖片顯示不出來/文字顯示不出來

滑動時元素不顯示

解決：給每個橫滑的元素塊使用硬件加速

li{ -webkit-transform: translateZ(0); }

問題：使用 animation 動畫后，頁面上 overflow:auto 的元素滾動條不能滑動

解決：不使用 translate 方式的動畫，換為使用 left/top 來實現元素移動的動畫

問題：上下滑動頁面時候，頁面元素消失

解決：檢查是否使用了 fadeIn 的 animation，如有則 fill-mode 使用 backwards 模式

{ -webkit-animation: fadeIn 0.5s ease backwards; }

問題：頁面上數字自動變成了可以點擊的鏈接

數字變為鏈接

解決：在頁面 <head> 里添加

<meta name="format-detection" content="telephone=no">

問題：input 在 iOS 中圓角、內陰影去不掉

去掉 input 的圓角與陰影

解決：

input{ -webkit-appearance: none; border-radius: 0; }

問題：焦點在 input 時，placeholder 沒有隱藏

focus 時隱藏 placholder

解決：

input:focus::-webkit-input-placeholder{ opacity: 0; }

問題： input 輸入框調出數字輸入鍵盤

解決

<input type="number" /> <input type="number" pattern="[0-9]*" /> <input type="tel" />

分別對應下圖中的1、2、3。

圓形圖片邊框變形

需要注意的是，單獨使用 type="number" 時候， iOS 上出現並不是九宮格的數字鍵盤，如果需要九宮格的數字鍵盤，可選擇使用 2、3 的方法。 1、2、3 在 Android 上均可以喚起九宮格的數字鍵盤

問題：搜索時，鍵盤的回車按鈕文字設定為“搜索”

定義鍵盤回車文案為搜索

解決： input 使用 type="search"，放在 form 表單內。兩者結合就能使輸入法中的回車按鈕文字變為“搜索”

<form action=""> <input type="search" /> </form>

問題：iframe 在 iOS 上沒有滾動條，直接撐出去

iframe 撐出界面

解決：給 iframe 外嵌套一個 div，為這個 div 設置固定高度與 overflow

<div> <iframe src=""></iframe> </div>

div{ height: 100px; overflow: auto; -webkit-overflow-scrolling: touch; }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 兩年移動端前端開發問題吐血匯總前端開發之旅- 移動端HTML5實現文件上傳 HTML5與移動端Web HTML5 移動端的上下左右滑動問題 cordova / Ionic 開發問題匯總 Android WebView開發問題及優化匯總 Html5移動端頁面布局通用模板暨移動端問題總結移動端導航欄樣式匯總(一) HTML5移動端拖動慣性移動端HTML5實現文件上傳