PC端 移動端常見的相容性問題總結

2022-08-28 03:21:11 字數 748 閱讀 8157

移動端:

① 安卓瀏覽器看背景,有些裝置會模糊,原因是手機的解析度太小

② 防止手機中頁面放大或縮小: 在meta中設定viewport user-scalable = no

③ 上下拉滾動條卡頓: overflow-scrolling: touch;

④ 禁止複製選中文字: user-select: none;

⑤ 長時間按住頁面出現閃退:-webkit-touch-callout: none;

⑥ 動畫定義3d硬體加速: transform: translate 3d(0,0,0);

⑦ formate-detection 啟動或禁止自動識別頁面中的**號碼,content = "yes/no"

⑧ a標籤新增tel是撥號功能

⑨ 安卓手機的圓角失效: background-clip: padding-box;

⑩ 手機端300ms延遲: fastclick

① 橫平時字型加粗不一致: text-size-adjust: 100%;

pc端:

① rgba不支援ie8 用opacity屬性代替rgba設定透明度

③ ie6不支援display: inline-block       設定為: display: inline

④ position : fixed 不支援ie5/ie6 

⑤ ie6,firfox中,width = width + padding + border

⑥ min-height比相容ie6/ie7

pc常見端相容性問題

原因 開啟除錯面板,你會發現 ie8 瀏覽器把 png 格式的 img 解析成了 span 標籤,導致圖無法顯 示。解決方案 在樣式裡面對 span 設定寬高和 display inline block 即可。解決方案 可以用 opacity opacity 0.7 ff chrome safari...

常見移動端相容性問題

文章 1.ios移動端click事件300ms的延遲相應 移動裝置上的web網頁是有300ms延遲的,往往會造成按鈕點選延遲甚至是點選失效。這是由於區分單機事件和雙擊螢幕縮放的歷史原因造成的。解決方式 fastclick可以解決在手機上點選事件的300ms延遲 zepto的touch模組,tap事件...

移動端相容性問題

1 定位問題 ios 2 寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳 3 防止手機中網頁放大和縮小 4 設定web應用是否以全屏模式執行 content的預設值是no 5 自動識別 號碼 telephone no可以禁用這功能,預設值是no 6 禁止複製 選中文字 e...