我在做移動端時遇見的css問題

關于css常見問題，大多是移動端的。

創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網站建設、網站重做改版、岳陽樓網站定制設計、自適應品牌網站建設、HTML5建站、商城系統(tǒng)網站開發(fā)、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為岳陽樓等各大城市提供網站開發(fā)制作服務。

簡單的排版規(guī)則：條目與條目之間空兩行，每條內容部分分段空一行。標點符號全部用中文字符。css的標點用英文。

條目編號后面緊跟英文字母的，要空一格，比如 4. css，“4.”和“css”之間有一個空格。

一、在做手機輪播圖時，banner圖的寬度是手機屏幕的寬度，輪播圖加了左右切換按鈕，按鈕的position:absolute；定位的元素，定位的元素超出父容器時（超出了100%），會出現(xiàn)滾動條。

二、在移動端有3種布局可選。

1.定位布局

說明：頭部、尾部是fixed定位。中間內容部分絕對定位，overflow-y:auto；

2. flex布局（朕極力推薦）

說明：這里寫的簡潔，沒有寫很多兼容，移動端兼容性比較好，安卓5.1以上都可以用。用的是較新的flex聲明。（這個布局是抄襲手淘團隊的。）

3.普通的流式布局

說明：頭部和尾部依然是fixed定位，但是#content內容部分則是用padding-top和padding-bottom來支撐頁面，這種布局相當垃圾，會帶來各種頁面上下莫名其妙的留白問題。

三、css屬性

1. word-wrap:break-word； word-break:break-all；讓一行連續(xù)的數(shù)字或英文字母遇到邊界自動換行。

2. -webkit-user-select:none | normal | text；這個屬性是禁止用戶選擇、復制文字，同時還會使input框、select框不能獲取焦點，導致無法輸入或選擇。 所以在使用這個屬性時，注意防止對input和select的污染。

3. css3屬性選擇器。li[class*='act']，可以選中所有class中有‘act’的li元素。

$('li').attr('class').indexOf('act'); 只是獲取第一個li的class，然后判斷是否有‘act’;

通過for循環(huán)可以進一步操作，

for(var i = 0; i $("li[class*='act']").length; i++){

$("li[class*='act']")[i] . . .

}

4.清除浮動，解決高度塌陷

a.偽類(抄襲bootstrap的做法)

.clearfix{}

.clearfix:after{ display:table; content:' '; clear:both; }

b.王妮的做法

.box{ clear:both; overflow:hidden; }

c.對于子元素寫margin-top把父級拖下來的情況

（百度說是W3C的標準，只要破壞了父級子級緊貼的結構就可以了）

給父級寫border-top，或者給父級寫padding-top。采用b方法也可以，a方法無效。

5. css高度單位和顏色單位

height:calc（100vh - 200px）; 目前來看，兼容性還不錯。注意，減號兩邊是有空格的。

background:rgba（255，255，255，0.5）; rgb顏色值 和 顏色透明度。

6.關于 padding-top:100%; padding-left:100%;

可以利用這兩個屬性做絕對正方形。比如微信朋友圈的照片9宮格，qq空間的照片9宮格，sina微博的照片9宮格。屏幕寬度未知，一行排3個，每個寬度都是33.33333%，但是高度不能寫百分比了。在每個寬度為33.3333%的元素里再寫一個div，這個div的默認寬度就是父級的33.33333%，再用padding-top:100%;把高度撐開，padding-top:%;就是根據已有寬度計算，padding-top:100%;padding-top的px值就和寬度相同，這樣，正方形就做出來了，在正方形里面position:absolute;一個div，width:100%; height:100%;然后在這個div里面布局就好。

每個正方形的間距可以用qq空間的2px的透明邊框來做，也可以像sina微博一樣，用左右padding和margin-bottom來做。一張圖和四張圖的時候，sina是另外寫兩個class來做的。

qq空間是js插件寫進去的，最大寬度是290px，高度是根據最大寬度計算出來的。

7. 0.5px的線

a.發(fā)現(xiàn)qq空間的細線，兼容2倍屏和3倍屏

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.5);

-moz-transform: scaleY(.5);

-ms-transform: scaleY(.5);

-o-transform: scaleY(.5);

transform: scaleY(.5)

}

.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

transform-origin: 100% 0

}

.action.flex:after,.action.flex.btn:after,.feed .source:after {

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%

}

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.6666);

-moz-transform: scaleY(.6666);

-ms-transform: scaleY(.6666);

-o-transform: scaleY(.6666);

transform: scaleY(.6666)

}

}

@media only screen and (-webkit-device-pixel-ratio: 3) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.33);

-moz-transform: scaleY(.33);

-ms-transform: scaleY(.33);

-o-transform: scaleY(.33);

transform: scaleY(.33)

}

}

b. weui的作法是

.weui-cells:after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #e5e5e5;

color: #e5e5e5;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

8.背景圖片尺寸background-size，img標簽object-fit，object-position。

background-size:contain | cover | auto 90% | 50% auto;

這是以背景圖的方式展示圖片的，如果用img元素的話，

object-fit:fill | contain | cover | none | scale-down;（和background-size效果類似）

object-position:center; 和background-position的取值一樣。

這兩個屬性一起用的話，就能讓img元素src的圖片效果像背景圖片的效果一樣，不會因為圖片尺寸不成比例而走形。但是兼容性不太好，目前只適合在移動端用。

9.阻止手機彈出默認菜單，長按img標簽或者長按a標簽會彈出系統(tǒng)默認菜單（ios上，安卓上沒測）。

-webkit-touch-callout:none;

10.給文字寫行高時，讓文字垂直居中時，要把高度也一起寫了，line-height:35px; height:35px;

在用appcan做hybrid app時，發(fā)現(xiàn)在華為meta8上，用 ul li 做九宮格，li 浮動排在一行時，每個 li 有文字，高度用li的行高撐開的，沒有文字的 li 和有文字的 li 的高度是不一樣的。有的格子有文字有的沒有文字，導致九個格子沒有排在3行，有格子掉下去了，排成了4行。所以，在用行高讓文字居中時，高度和行高要都寫上。

11. text-align:justify;

p標簽內大段文字時，除了最后一行，其余的文字都是左對齊，導致段落文字距離右邊間距明顯大于左邊。

可以利用這個屬性不處理最后一行的特性，做這種布局：

上面這個布局有一點bug，最后一行是留白，把父級撐高了，原因是父級認為所有子代，包括空文本節(jié)點都是占據空間的，哪怕空格，也占據空間。可以給父級 ul 寫 font-size:0；就能把底部留白去除了，然后給子代再寫font-size:14px;就可以了。 但是，text-align:justify;畢竟是處理空格（拉伸空格來使內部元素水平分散），所以在html中，li 要是連著寫和分段寫，表現(xiàn)結果是不一樣的，所以這種奇妙的布局還是有些許不完美，甚至不能用。

12.去除-webkit-的滾動條

#content::-webkit-scrollbar{ display：none; }

設置滾動條樣式

/*滾動條寬度*/

#content::-webkit-scrollbar{ width:5px; }

/*滾動條滑塊*/

#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }

/*滾動條的整個背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

TGuide

/* scrollbar */

::-webkit-scrollbar{width:10px;height:10px}

::-webkit-scrollbar-button{display:none}

::-webkit-scrollbar-track{background-color:black}

::-webkit-scrollbar-track-piece{background:#FFF}

::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}

::-webkit-scrollbar-corner{background-color:#535353}

/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/

前面不加選擇器表示，所有出現(xiàn)滾動條的元素。

13.設置placeholder的樣式

input::-webkit-input-placeholder{ color:#999; }

input::-moz-input-placeholder{ color:#999; }

input:-ms-input-placeholder{ color:#999; }

注意 -ms- 前面是一個 “ ：”。

14.移動端點擊某一行 :active 時添加背景色，比如 li:active{ background:#eee; } 時，要給 body標簽上寫ontouchstart，否則沒有效果。

另一方面，給body添加，可以阻止圖片被默認拖拽。百度的logo就可以被拖拽。

15.pageshow（）和pagehide（）方法。

問題描述：A頁面跳轉到B頁面，在B頁面操作后，返回到A頁面，A頁面的ajax方法不能被再次觸發(fā)。appcan里面從B頁面返回A頁面是直接關閉了B頁面，微信里是從緩存里取。這兩者都不能再次觸發(fā)A頁面的ajax。比如，修改姓名，修改性別。從A頁面點擊input跳轉到B頁面進行修改操作，修改完成之后返回A頁面，發(fā)現(xiàn)信息沒有刷新，此時需要主動觸發(fā)。

解決方法：可以監(jiān)聽pageshow方法，用addEventListener方法進行監(jiān)聽。pageshow（）方法的觸發(fā)條件是，只要頁面被顯示就觸發(fā)，比如appcan里的B頁面覆蓋在A頁面，把B頁面關閉，A頁面自然就展現(xiàn)出來了，那么A頁面的pageshow方法就會觸發(fā)；微信里，點擊返回，雖然是從緩存里取頁面，但也會觸發(fā)pageshow方法。pagehide（）顧名思義。

16.關于position。

華為meta7，安卓版本4.4.2，position:relative; 的元素比position:absolute; 的元素層級要高。百度新聞的導航效果，也是利用了這個。很奇怪。

這種結構，i.line是absolute，每個div都是relative，安卓4.4.2上 i.line 會被父級的兄弟div遮擋住。

解決辦法是，把 i.line 拿出來，和div同級。

17. background:url() no-repeat center, url() no-repeat center; 可以一次性放兩個圖片，中間用逗號隔開。

18.關于移動端軟鍵盤彈起，蓋住頁面的問題。

核心解決辦法是利用 document.activeElement.scrollIntoView(false); 參數(shù)false，表示activeElement的元素與頁面下邊對齊，true表示activeElement的元素與頁面上邊對齊。這個方法兼容性很好。

另一個方法與之類似 document.activeElement.scrollIntoViewIfNeeded(); 這個方法效果不是很好，沒有上面那個好用。

19.常見于小說、報紙排版的column布局。

常用的5個屬性有4個是知曉效果的：

column-width:; 每列的寬度。

column-gap:; 列與列之間的間距。

column-fill:; 不知有何軟用。

column-rule:; 列與列直接的分割線，與border屬性效果一樣。

column-count:; 總共分多少列。（這個屬性受column-width限制，當同時寫上column-width和column-count時，以column-width優(yōu)先，比如總寬度800px，height:200px; column-width:400px; column-count:4; 顯然，800px最多只能分2列，所以優(yōu)先以column-width進行計算。）

小兼容：ios上，橫向滾動 overflow-x:auto; 的容器不適合直接當成分欄布局的容器，應該在 overflow-x 的元素內嵌套一個div當做分欄布局的容器。否則會出現(xiàn)，分欄線，column-rule不跟隨容器滾動的奇異現(xiàn)象。另外，column-gap不適合賦值，應當將column-gap寫成0，列與列之間的間距可以用分欄布局的子元素的左右padding來做。

大段文字

.box{ width:300px; height:14em; overflow-x:auto; } /*滾動的容器*/

.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分欄的容器*/

.col p{ padding:0 .5em; line-height:1.2; } /*文字內容的容器，加左右padding以增加列與列之間的間距。*/

四、貌似很多webapp都會寫兩個meta標簽

不確定是否支持16進制的顏色值。（好像測試過，16進制顏色沒有效果。在appcan里也沒有效果。）

五、 一般不能上傳相同圖片

可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。

六、在安卓上touchmove出現(xiàn)了神奇的bug，百度上說，安卓上touchmove的一瞬間就會觸發(fā)touchcancel，touch事件就全部被取消了。IOS上是沒有這個問題的。

解決方法是：在touchmove里寫e.preventDefault();即可。但是這樣的話，手指滑動頁面就不能scroll了。頁面將無法滾動了。

七、flex布局

1. 2012年以后的版本

給父級添加 display:-webkit-flex; display:flex;

flex盒子內子元素的排列方向稱作主軸，與主軸垂直的稱作交叉軸。

flex盒子內的子元素可以被作項目。

注意：設為flex后，其子元素的float、clear、vertical-align屬性就會失效。

a.作用于父級的6個屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

//子元素的排列方向

flex-direction:row（默認值，從左到右） | row-reverse（從右到左） | column（從上到下） | column-reverse（從下到上）;

//子元素是否換行

flex-wrap:nowrap（默認值，不換行） | wrap（換行） | wrap-reverse（換行，但第一行在下方）;

//子元素排列方向和子元素是否換行的簡寫

flex-flow:row nowrap;（默認值，從左到右，不換行。）

//項目（子元素）在主軸上的對齊方式

justify-content:flex-start（默認值，以起點為始） | flex-end（以終點為始） | center（居中） | space-between（首尾兩個元素緊貼邊界，其余元素之間間隔相等） | space-around（每個項目的兩側間隔相等，相當于給每個項目加了margin，并且左右margin相等。所以首尾元素與邊界都是有間距的。）;

//項目（子元素）在交叉軸上的對齊方式

align-items:flex-start（以起點為始） | flex-end（以終點為始） | center（居中） | baseline（與項目的第一行文字的基線對齊） | stretch（默認值，在交叉軸方向撐滿父級）;

//多根軸線的對齊方式，如果只有一根軸線，該屬性不起作用。

align-content:flex-start（與交叉軸的起點對齊） | flex-end（與交叉軸的終點對齊） | center（與交叉軸的中點對齊） | space-between（與交叉軸兩端對齊，軸線之間的間隔平均分布） | space-around（每根軸線兩側的間隔都相等。軸線之間的間隔比軸線與邊框的間隔大一倍，第一行和最后一行不會緊貼邊框） | stretch（默認值，鋪滿整個交叉軸）;

（ align-content：stretch; 第一根軸線與邊框對齊，其他軸線均分父級間隙。 ）

b.作用于項目（子元素）的6個屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

//子元素的排列順序

order:0（默認值） | 1 | 2 | 3 . . .

//項目（子元素）的放大比例

flex-grow:0（默認值，默認不放大，盡管有剩余空間） | 1 | 2 | 3 . . .

//項目的縮小比例

flex-shrink:1（默認值，當空間不足時，該項目將縮小） | 0（不論如何，都不縮小）;

//項目占據的主軸空間

flex-basis:auto（默認值，項目本來的大小） | 固定值（200px，50%，100% . . .）;

//flex-grow，flex-shrink，flex-basis的簡寫 flex ：0 1 auto；

flex:0 1 auto（默認值，有多余空間也不放大，但空間不足會縮小，默認占據空間就是自身大小）;

flex:auto; = flex：1 1 auto; 根據空間大小，可放大可縮小。（有兼容性問題，chrome可以正常解析 flex：auto; -- flex：1 1 auto; 但 IE 就搞笑了，IE10解析出來的flex：auto -- flex：1 0 auto；只放大，不縮小。IE11解析出來的flex：auto；和chrome一樣，可放大可縮小。所以在用這個屬性的時候，要寫完整值，不要簡寫。）

flex:none； -- flex：0 0 auto；不放大，也不縮小。

//單個項目與其他項目不一樣的對齊方式，會覆蓋父級的align-items;

align-self:auto（默認值， 繼承父級的align-items的值） | flex-start | flex-end | center | baseline | stretch; 除了auto，其他的與父級align-items屬性一致。

注意要活用align-self：stretch;和align-items：stretch;

2. 2009年的版本

目前新版本被支持的很好，所以舊版的直接寫帶前綴的。

display:-webkit-box; display:-ms-flexbox;

子元素如果有display：inline的，要把子元素寫成display：block; 2012年的版本不需要。

a.父級的5個屬性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。

//項目在主軸上的對齊方式

-webkit-box-pack:start（默認值，從起點開始） | end | center | justify;

//項目在交叉軸上的對齊方式

-webkit-box-align:stretch（默認值，交叉軸方向撐滿父級） | start | end | center | baseline;

//項目的排列順序

-webkit-box-direction:normal（默認值，以起點為始） | reverse（以終點為始）;

//主軸方向

-webkit-box-orient:horizontal（默認值，水平方向） | vertical（垂直方向） | inline-axis（行內方式，映射為horizontal） | block-axis（塊方式排列，映射為vertical）;

//項目（子元素是否換行）

box-lines:single（默認值，不允許） | multiple（允許）;

經測試，沒有瀏覽器支持，這個屬性不能用。

b.子元素的3個屬性。box-flex，box-flex-group，box-ordinal-group。

//是否縮放

-webkit-box-flex:0（默認值，不放大也不縮小） | 1 | 2 | 3 . . .;

//子元素排列次序

-webkit-box-ordinal-group:1 | 2 | 3 . . . 從小到大排列。

3. 對 1、2 的小結。

2012年版本比2009年的版本主要多了兩個屬性，1個是子元素是否換行，flex-wrap，2009年的box-lines不起作用。還有一個是子元素在主軸的對齊方式，2012年的justify-content:space-around; 2009年的沒有這個效果，但是可以通過加左右padding值的方式做到。

如果要兼容2009年版本的盒子布局又想換行的，只能改用float布局。

八、html結構嵌套問題

p標簽內不要嵌套塊元素，其他的像h、p、dl . . .的塊元素都會發(fā)生解析錯誤。可以嵌套行間元素。

類似的，還有a標簽里不能再出現(xiàn)a標簽，嵌套多少層都不行。

html標簽嵌套要按照塊元素包含行間元素的規(guī)則來寫。

九、標簽

讓瀏覽器用最新內核渲染。

十、form標簽一點特性

在移動端，input框獲取焦點時，瀏覽器會彈出軟鍵盤，想讓軟鍵盤的enter鍵變成搜索兩個字，需要讓這個input按照這種結構寫：

說明：onsubmit='return false';阻止表單默認提交，便于自己操作。

input 的 type 必須是 search。

input 的 加了style='position：relative;'，防止ios上點擊搜索按鈕會閃屏（白屏）。

十一、瀏覽器兼容

1.關于table表格的寬度設置問題。

Firefox和chrome的解析方式是不一樣的，chrome會把你寫的table寬度全部轉化成px。Firefox則不會，所以在td寫行間樣式寬度時，不能百分比和px混用，要統(tǒng)一，要么每個td都寫百分比的寬，要么都寫px的寬；不要這幾個td寫百分比，那幾個td寫px。

2.某些安卓不識別height:calc（）; 可以用flex布局代替。

十二、KTV字幕效果

實現(xiàn)方式1：

把文字寫兩遍，兩個行間元素span，包裹相同的文字。

首頁

首頁

或者

首頁

首頁

實現(xiàn)原理是：讓內部兩個span寬度相等，其中一個設置width:0%；overflow:hidden; 然后用js動態(tài)控制width從0% -- 100%。

實現(xiàn)方式2：（張鑫旭說只適用于chrome，但是我測了下，好像firefox也是可以的。）

實現(xiàn)原理：background-image是覆蓋在background-color上的，chrome有個私有屬性 -webkit-background-clip:text; 意為背景裁切，以文字為裁切起止。效果就是背景圖片只會展示文字的書寫路徑，除了文字的其他部分空間不展示背景圖。再結合-webkit-text-fill-color:transparent; 將文字渲染的顏色寫為透明，這樣，文字路徑就透出了背景圖。再改變背景圖片的水平位置，就能露出文字和背景圖片下的背景顏色，就做到KTV字母效果了。

核心的css屬性：

background-image:url(); /*純色的背景圖，用來渲染文字顏色，因為文字是透明的。*/

background-repeat:no-repeat;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-position:0 0;

↑改變他就可以了。

關于實現(xiàn)方式2的圖示：

css移動端的兼容性問題 （適配問題）

css移動端的兼容性問題 （適配問題）

一、浮動問題

簡述：

我們在平時切頁面時,經常會出現(xiàn)用完浮動(float),忘記刪除.下面的布局出現(xiàn)莫名其妙的空白高度,導致布局調整失敗

避免使用浮動

二、

鏈接:

1、水平居中—使用 text-align

2、margin: auto 居中

3、table-cell 居中

4、Absolute 居中

5、使用 translate 居中

6、使用 Flexbox 居中

7、使用 calc 居中

三、常見的兼容性問題

四、css hack

五、css filter

六、更換渲染模式

七、瀏覽器內核

八、讓H5頁面適應所有的iphone手機以及安卓機型的六大技巧

九、REM 布局

移動端兼容性測試怎么做？

什么是兼容性測試

兼容性測試是指測試軟件在特定的硬件平臺上、不同的應用軟件之間、不同的操作系統(tǒng)平臺上、不同的網絡等環(huán)境中是否能夠很友好的運行的測試。–【百度百科】

為什么要做兼容性測試

目前碎片化十分嚴重，尤其是安卓設備。安卓設備碎片化、品牌碎片化，大家熟知的安卓品牌都有好多家，每家可能還有定制的系統(tǒng)，都給我們適配帶來了不小的挑戰(zhàn)。除了上面的碎片化，當然還有系統(tǒng)版本碎片化，屏幕碎片化等，為了給用戶更好的用戶體驗，做APP的兼容性測試，還是非常有必要的。

兼容性影響因素

用戶

硬件

軟件

技術

網絡

影響因素大致可以分為以上幾類，我們對所測APP做兼容性測試時，可以從以上方面去考慮。

1、用戶

我們需要依據自身APP用戶群體的特征以及使用習慣，去做相應的兼容。比如用戶群體如果大多是老人的話，可以考慮大字體的適配。比如針對旅游人士，可以考慮過程中網絡的狀況。如果擁有大量海外用戶，可以考慮多幣種、多語言、多度量、時區(qū)問題。

2、硬件

設備類型（手機、平板、穿戴式設備）

生產商（安卓手機存在每個廠商的定制化差異）

顯示屏（屏幕大小、分辨率）

特殊硬件功能（NFC、藍牙、相機、定位功能等）

3、軟件

操作系統(tǒng)

瀏覽器內核

伴生應用

4、技術

RN、H5、native

開發(fā)語言(oc、swift）

5、網絡

2G、3G、4G、wifi

兼容各種網絡下APP的表現(xiàn)

iOS APP兼容性

屏幕分辨率

屏幕尺寸（含異形）

操作系統(tǒng)版本

Xcode版本

開發(fā)語言

第三方庫或SDK

安裝、升級

Android APP兼容性

屏幕分辨率

屏幕尺寸（含異形）

Android版本

系統(tǒng)版本

處理器架構（arm、x86）

開發(fā)語言（Java、koltin、混合）

第三方庫或SDK

安裝、升級

H5兼容性

CSS樣式兼容（一些屬性的瀏覽器標示前綴沒有添加，導致默認瀏覽器不認識這個屬性，所以樣式錯亂。有些布局不靈活，樣式邊界處理不好，導致寬窄屏顯示異常）

JS兼容（主要是瀏覽器或者系統(tǒng)版本，新的js api不支持，但是沒有做降級處理）

第三方庫或SDK

框架（react、vue……）

緩存（sessionstorage、localstorage）

哪些場景需要做兼容性驗證

UI顯示

多次快速點擊

拉起虛擬鍵盤擋住輸入區(qū)

虛擬物理按鍵收起與顯示

多個輸入框來回切換

控件焦點熱區(qū)文體

前后臺、多個應用切換

指紋識別和faceid等

框架升級

網絡

新老版本兼容

第三方依賴庫或者SDK升級

前后端版本兼容

如何做兼容性測試

主要分為內部和外部。內部由測試人員自己覆蓋主要機型。機型選取的原則是，根據自己APP用戶的機型，選取至少top10進行人工兼容性測試。內部還可以進行的就是UI自動化測試。外部可以借助云測平臺，比如testin、testbird等。

css3中的樣式兼容性問題怎么弄？

1.目前來說對css支持最好的公認的是火狐瀏覽器，錯位的原因在css代碼書寫不規(guī)范。

2.兼容性：對于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中也增加很多工作量（至少我接觸的開發(fā)人員制作div頁面比table頁面的標準時間要長一些）。

3.對css縮寫的支持問題：

不論是ie 還是ff對css的縮寫都有一小點問題比如border: 0xp solid #fff;兩個瀏覽器支持都沒有問題

但對于四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現(xiàn)邊界解釋錯誤，而導致頁面變形正確縮寫：border-width:0px 1px 2px 3px;

border-style:solid;

border-color:#fff;

第二點是 ie對于css的magin padding 等默認值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。

IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理

2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行

3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以

8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}

移動端開發(fā)的兼容問題

一、ios下input設置type=button屬性disabled設置true,會出現(xiàn)樣式文字和背景異常問題，使用opacity=1來解決css

二、一些狀況下對非可點擊元素如(label,span)監(jiān)聽click事件，ios下不會觸發(fā)，css增長cursor:pointer就搞定了ios

三、1px邊框問題使用

xx:before{

content:'';

position: absolute;

top: 0;

left: 0;

border: 1px solid #ccc;

width: 200%;

height: 200%;

box-sizing:border-box;

-webkit-box-sizing:border-box;

-webkit-transform: scale(0.5);

transform: scale(0.5);

-webkit-transform-origin: left top;

transform-origin: left top;

}git

四、input為fixed定位在ios下的bug問題，點擊焦點input，input跳到中間位置，可使用內容滾動框也是fixed來設置github

五、移動端字體小于12px使用四周邊框或者背景色塊，安卓文字偏上bug問題，可使用總體放大1倍再縮放，并且字體不要是奇數(shù)web

六、在移動端圖片上傳圖片 使用accept="image/*" multiple,兼容低端機的問題app

七、在h5嵌入app中，ios若是出現(xiàn)垂直滾動條時，手指滑動頁面滾動以后，滾動很快停下來，好像踩著剎車在開車，有“滾動很吃力”的感受self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;對webview設置了更低的“減速率”字體

八、click 300ms 延時響應 使用 Fastclick

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );flex

九、input 有placeholder狀況下不要設置行高，不然會偏上spa

十、移動端適配可使用amfe-flexible，postcss-px2rem

css 兼容性問題

1.H5網頁touch滑動的時候在蘋果手機上出現(xiàn)不流暢的問題

-webkit-overflow-scrolling 用來控制元素在移動設備上是否使用滾動回彈效果.

解決辦法：給所有網頁添加如下樣式

說明：

-webkit-overflow-scrolling: touch; 當手指從觸摸屏上移開，會保持一段時間的滾動

-webkit-overflow-scrolling: auto; 當手指從觸摸屏上移開，滾動會立即停止

2. css 蘋果手機按鈕默認樣式如何去掉

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea { -webkit-appearance: none;}

3. 如果還有圓角的問題，

** 4.蘋果手機不支持box-shadow屬性**

如果先給input寫邊框，用 border:1px solid #ccc;

5、去除Chrome等瀏覽器文本框默認發(fā)光邊框

6.去掉高光樣式：

當然這樣以來，當文本框載入焦點時，所有瀏覽器下的文本框的邊框都不會有顏色上及樣式上的變化了，這樣的話，當文本框載入焦點時，邊框顏色就會變?yōu)槌壬o用戶一個反饋。

7、去除IE10+瀏覽器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display: none;}

8.H5頁面寫出來，在chrome中出現(xiàn)如下錯誤，只需添加如下css即可解決

*{touch-action: pan-y;}

網頁題目：css樣式移動端兼容性,移動端css布局
文章路徑：http://chinadenli.net/article39/dsgscph.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供、全網營銷推廣、定制網站、網站導航、手機網站建設、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)