webapp 移動端開發

2022-08-09 05:36:13 字數 2761 閱讀 1359

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...