一、IOS自帶safari瀏覽器

1、safari不支持fixed+input輸入框。

解決方案：

http://www.haorooms.com/post/ios_fixed_input

2、safari圖片加載失敗，默認圖片過大。

解決方案：

http://www.haorooms.com/post/img_faile_jiangrong

3、ios默認safari瀏覽器對齊問題解決

調試方法：

二、安卓UC瀏覽器

1、安卓UC為代表的瀏覽器不支持部分css3屬性，例如calc等 width:90%;width:calc(sdadas);

2、滾動事件不會觸發touchmove事件

三、手機瀏覽器通用問題

1、彈出層touchmove滾動，會觸發body滾動(出現前提是body中有滾動軸)

http://www.haorooms.com/post/webapp_bodyslidebcdiv

2、假如你整個網頁用rem字體，部分安卓瀏覽器出現字體過大的情況。

3、部分安卓瀏覽器對margin要求比較苛刻。

一、關于meta

(一)、常用的公共meta屬性

1、viewport

width=device-width 寬度是設備屏幕的寬度(像素)

height=device-height 高度是設備屏幕的高度(像素)

initial-scale 初始的縮放比例

minimum-scale 允許用戶縮放到的最小比例

maximum-scale 允許用戶縮放到的最大比例

user-scalable 用戶是否可以手動縮放

2、Format-detection

format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html里的一些格式的，那關于meta的format-detection屬性主要是有以下幾個設置：

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

meta name="format-detection" content="email=no"

meta name="format-detection" content="adress=no"

也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"

一般只要禁用手機撥號即可

3、http-equiv

http-equiv顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。 meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數" content="參數變量值"＞ ；

(二)、IOS私有meta屬性

(四)、其他瀏覽器私有meta屬性【除非特需，一般不推薦使用】

1、QQ瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應用模式

2、UC瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應用模式

二、關于樣式

1、上下拉動滾動條時卡頓、慢

body {

-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;

}

2、禁止復制、選中文本

Element {

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

解決移動設備可選中頁面文本(視產品需要而定)

3、長時間按住頁面出現閃退

element {

-webkit-touch-callout: none;

}

4、iphone及ipad下輸入框默認內陰影

Element{

-webkit-appearance: none;

}

5、ios和android下觸摸元素時出現半透明灰色遮罩

Element {

-webkit-tap-highlight-color:rgba(255,255,255,0)

}

設置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。

后面一篇文章有詳細介紹，地址：http://www.haorooms.com/post/phone_web_ysk

6、active兼容處理

7、動畫定義3D啟用硬件加速

Element {

-webkit-transform:translate3d(0, 0, 0)

transform: translate3d(0, 0, 0);

}

注意：3D變形會消耗更多的內存與功耗

8、Retina屏的1px邊框

Element{

border-width: thin;

}

9、旋轉屏幕時，字體大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

-webkit-text-size-adjust:100%;

}

10、transition閃屏

/設置內嵌的元素在 3D 空間如何呈現：保留3D /

-webkit-transform-style: preserve-3d;

/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /

-webkit-backface-visibility:hidden;

11、圓角bug

某些Android手機圓角失效

background-clip: padding-box;

總結

以上是生活随笔為你收集整理的1px问题在ios与android,IOS安卓常见问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。