h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面
忽略將頁面中的數字識別為**號碼
忽略android平台中對郵箱位址的識別
將**新增到主螢幕快速啟動方式,僅針對ios的safari頂端狀態條的樣式
移動端如何定義字型font-family
body中文字型使用系統預設即可,英文用helvetica
ios系統中元素被觸控時產生的半透明灰色遮罩怎麼去掉
a,button,input,textarea
部分android系統中元素被點選時產生的邊框怎麼去掉
a,button,input,textarea
winphone系統a、input標籤被點選時產生的半透明灰色背景怎麼去掉
webkit表單元素的預設外觀怎麼重置
webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder input:focus::-webkit-input-placeholder
禁用 select 預設下拉箭頭
select::-ms-expand
禁用 radio 和 checkbox 預設樣式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check
禁用pc端表單輸入框預設清除按鈕
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear
.css
禁止ios和android使用者選中文字
.css
打**
打**給:0755-10086
發簡訊,winphone系統無效
發簡訊給: 10086
螢幕旋轉的事件和樣式 window.orientation,取值:正負90表示橫屏模式、0和180表現為豎屏模式; js
window.onorientationchange = function() }
螢幕旋轉的事件和樣式 window.orientation,取值:正負90表示橫屏模式、0和180表現為豎屏模式; css3
//豎屏時使用的樣式 @media all and (orientation:portrait) } //橫屏時使用的樣式 @media all and (orientation:landscape) }
$('html').one('touchstart',function())
搖一搖功能
html5 devicemotion:封裝了運動感測器資料的事件,可以獲取手機運動狀態下的運動加速度等資料。
手機拍照和上傳
body
消除transition閃屏
.css
開啟硬體加速
.css
取消input在ios下,輸入的時候英文首字母的預設大寫
android 上去掉語音輸入按鈕
input::-webkit-input-speech-button
如何阻止windows phone的預設觸控事件
html/* 禁止winphone預設觸控事件 */
要做到全相容的辦法,可通過繫結ontouchstart和ontouchend來控制按鈕的類名
.btn-blue
.btn-blue-on
按鈕
模擬按鈕hover效果
移動端觸控按鈕的效果,可明示使用者有些事情正要發生,是乙個比較好體驗,但是移動裝置中並沒有滑鼠指標,使用css的hover並不能滿足我們的需求,還好國外有個啟用css的active效果,**如下,相容性ios5+、部分android 4+、winphone 8
.btn-blue
.btn-blue:active 按鈕
移動端字型單位font-size選擇px還是rem
html@media screen and (min-width:480px) and (max-width:639px)
} @media screen and (min-width:640px) and (max-width:719px)
} @media screen and (min-width:720px) and (max-width:749px)
} @media screen and (min-width:750px) and (max-width:799px)
} @media screen and (min-width:800px) and (max-width:959px)
} @media screen and (min-width:960px) and (max-width:1079px)
} @media screen and (min-width:1080px)
}
移動端web app開發備忘
近期要做個手機html5的頁面,做些知識儲備,重要的點記錄下來以備興許。1.devicepixelratio 定義裝置物理象素和裝置獨立象素的比例。css中的px能夠看作是裝置的獨立象素。通過devicepixelratio。就能夠知道裝置上的乙個css畫素代表著多少個物理畫素,能夠考慮device...
移動端webApp之大前端 一
由於移動端的手機螢幕跟pc端不同,解析度也是五花八門,所以對於移動端前端頁面布局就是很大的挑戰。不過我們既然知道了移動端跟pc端不同 就可以有針對性的進行開發,畢竟移動端的瀏覽器不牽扯到太多pc端似的各種坑爹的相容!viewport 不得不說的是viewport,這是移動端開發必備的乙個meta標籤...
WebApp移動端前端UI庫
frozen ui 自述 簡單易用,輕量快捷,為移動端服務的前端框架。主頁 開發團隊 qqvip fd team github demo frozenui demo index.html weui 開發團隊 wechat official design team github demo sui mo...