1、pc端有ie,chrome,ff 內核兼容問題移動端,簡單來說兼容問題相對較少。但是移動端要做好多分辨率的處理。移動端所有圖片和所有html標簽的尺寸都要減半。
2、移動端在布局跟js效果方面,與PC端有什么不同:
先說布局方面:
PC端最常用的就是固定寬度980px(也有960,1000,1200),然后水平居中 width:980px;margin:0 auto;但移動端就不能這么用了,因為很多網頁都是可以橫屏看,也可以豎屏看;很多屏幕的分辨率不一樣;
所以只要牽涉到移動端,就要牽涉到響應式(也叫自適應);如果是只針對移動端的項目,我平時主要考慮的是320px寬 到 750px寬的兼容;
js方面:(有沒有canvas,對js影響很大)
第一、普通移動端網頁(比如手機新浪網,手機淘寶,手機百度等)這個在js方面和PC端區別不是太大;主要的區別在於移動端沒有了鼠標懸停(onmouseover);點擊(onclick)還可以用;多了觸摸、滑動(會用一些插件)。
第二、canvas相關游戲canvas相關的html5增加了好多js;
3、手機游覽器可能不兼容css3的屬性,這時你可以使用以下代碼來加強你代碼的健壯性
(1)@media screen and (max-width: 355px) { //寬度小於355px時
...
(2)我們的處理方法是在使用calc()的上面寫上普通的樣式,例如:width:95%;
width:calc(100% - 10px);
width:-webkit-calc(100% - 10px);
width:-moz-calc(100% - 10px);
當游覽器無法讀取樣式時會使用最上面的widht:95%;這樣會與實際設計稿有些許出入,所以使用時謹慎對待~ //添加屬性
}