移動端常見問題及解決方案

2022-07-27 11:24:12 字數 4516 閱讀 4672

h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面

忽略將頁面中的數字識別為**號碼

忽略android平台中對郵箱位址的識別

將**新增到主螢幕快速啟動方式,僅針對ios的safari頂端狀態條的樣式

移動端如何定義字型font-family,中文字型使用系統預設即可,英文用helvetica

移動端字型單位font-size選擇px還是rem。對於只需要適配手機裝置,使用px即可,對於需要適配各種移動裝置,使用rem,例如只需要適配iphone和ipad等解析度差別比較挺大的裝置。

移動端touch事件(區分webkit 和 winphone)

當使用者手指放在移動裝置的螢幕上滑動會觸發的touch事件

以下支援webkit:

1、touchstart——當手指觸碰螢幕時候發生。不管當前有多少只手指

2、 touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面,會呼叫event的preventdefault()可以阻止預設情況的發生:阻止頁面滾動

3、touchend——當手指離開螢幕時觸發

4、touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()乙個提示框,此時會觸發該事件,這個事件比較少用

移動端click螢幕產生200-300 ms的延遲響應

移動裝置上的web網頁是有300ms延遲的,往往會造成按鈕點選延遲甚至是點選失效。

解決方案

fastclick可以解決在手機上點選事件的300ms延遲

zepto的touch模組,tap事件也是為了解決在click的延遲問題

觸控事件的響應順序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解決300ms延遲的問題,也可以通過繫結ontouchstart事件,加快對事件的響應。

在高畫質顯示屏中的點陣圖被放大,會變得模糊?

移動端的視覺稿通常會設計為傳統pc的2倍。

例如寬高為:200px*200px,那麼寫法如下:.css其它元素的取值為原來的1/2,例如視覺稿40px的字型,使用樣式的寫法為20px:.css

ios系統中元素被觸控時產生的半透明灰色遮罩怎麼去掉?

ios使用者點選乙個鏈結,會出現乙個半透明灰色遮罩, 如果想要禁用,可設定-webkit-tap-highlight-color的alpha值為0,也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩

a,button,input,textarea 

部分android系統中元素被點選時產生的邊框怎麼去掉?

android使用者點選乙個鏈結,會出現乙個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣,可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

a,button,input,textarea 

input:focus::-webkit-input-placeholder 

4、webkit表單輸入框placeholder的文字能換行麼?

ios可以,android不行~

ie10(winphone8)表單元素預設外觀如何重置?

1、禁用 select 預設下拉箭頭

::-ms-expand適用於表單選擇控制項下拉箭頭的修改,有多個屬性值,設定它隱藏 (display:none) 並使用背景來修飾可得到我們想要的效果。

select::-ms-expand  

2、禁用 radio 和 checkbox 預設樣式

::-ms-check適用於表單核取方塊或單選按鈕預設圖示的修改,同樣有多個屬性值,設定它隱藏 (display:none) 並使用背景來修飾可得到我們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check 

5、禁止ios和android使用者選中文字

.css 

參考《如何改變表單元素的外觀(for webkit and ie10)》

打**發簡訊的怎麼實現?

1、打**

打**給:0755-10086

2、發簡訊

winphone系統無效

發簡訊給: 10086

模擬按鈕hover效果

移動端觸控按鈕的效果,可明示使用者有些事情正要發生,是乙個比較好體驗,但是移動裝置中並沒有滑鼠指標,使用css的hover並不能滿足我們的需求,還好國外有個啟用css的active效果,**如下:

按鈕

相容性ios5+、部分android 4+、winphone 8

要做到全相容的辦法,可通過繫結ontouchstart和ontouchend來控制按鈕的類名

按鈕

螢幕旋轉的事件和樣式

1、事件

window.orientation,取值:正負90表示橫屏模式、0和180表現為豎屏模式;

window.onorientationchange =function() }  

/*橫屏時使用的樣式*/ 

@media all and (orientation:landscape)  

應對方案:觸屏即播

$('html').one('touchstart',function() 

最好的解決方案:整個頁面用rem或者百分比布局

消除transition閃屏

.css

android 2.3 bug

@-webkit-keyframes 需要以0%開始100%結束,0%的百分號不能去掉

after和before偽類無法使用動畫

border-radius不支援%單位

translate百分比的寫法和scale在一起會導致失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

三星 galaxy s4中自帶瀏覽器不支援border-radius縮寫

同時設定border-radius和背景色的時候,背景色會溢位到圓角以外部分

部分手機(如三星),a鏈結支援滑鼠:visited事件,也就是說鏈結訪問後文字變為紫色

參考《border-radius 移動之傷》

設計高效能css3動畫的幾個要素

盡可能地使用合成屬性transform和opacity來設計css3動畫,不使用position的left和top來定位

利用translate3d開啟gpu加速

參考《high performance animations》

fixed bug

ios下fixed元素容易定位出錯,軟鍵盤彈出時,影響fixed元素定位

android下fixed表現要比ios更好,軟鍵盤彈出時,不會影響fixed元素定位

ios9下不支援position:fixed

解決方案:可用isroll.js,暫無完美方案

參考《移動端web頁面使用position:fixed問題總結》

《使用iscroll.js解決ios4下不支援position:fixed的問題》

如何阻止windows phone的預設觸控事件

winphone下預設觸控事件事件使用e.preventdefault是無效的

目前解決方法是使用樣式來禁用

html/* 禁止winphone預設觸控事件 */ 

參考:《windows phone 8 touch support》

常用的移動端框架

zepto.js

語法與jquery幾乎一樣,會jquery基本會zepto~,官網:

中文(非官網):

常使用的擴充套件模組:

瀏覽器檢測:

tap事件:

iscroll.js

解決頁面不支援彈性滾動,不支援fixed引起的問題~,實現下拉重新整理,滑屏,縮放等功能~,

官網:滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.jsislider.jsfullpage.js

Matrikon OPC常見問題及解決方案(一)

本文主要分享了使用matrikonopc伺服器時遇到的一些最常見的問題和相應的解決方案。在聯絡matrikonopc支援團隊之前,你可以看一下以下問題 解決方案和問題 答案部分是否能幫助你解決目前問題。安裝時出現 aprxdist 錯誤問題 安裝時出現的 aprxdist 錯誤是什麼?解決方案 以管...

Oracle常見問題及解決方案

沒有人會否認oracle是全球最有影響的資料庫產品之一 但是龐大的系統,總是會出現各種各樣的問題,很多經驗不足的使用者面對著那些錯誤提示束手無策。本文是整理了oracle資料庫在使用過程中一些常見的問題及解決方案,希望能給初學者一點啟示。1 ora 12541 tns 沒有 原因 沒有啟動 或者 損...

Oracle常見問題及解決方案

沒有人會否認oracle是全球最有影響的資料庫產品之一 但是龐大的系統,總是會出現各種各樣的問題,很多經驗不足的使用者面對著那些錯誤提示束手無策。本文是整理了oracle資料庫在使用過程中一些常見的問題及解決方案,希望能給初學者一點啟示。1 ora 12541 tns 沒有 原因 沒有啟動 或者 損...