?
業務咨詢: 0898-3188 818824小時應急響應:18608931763 發郵件
新聞動態
移動網站開發——CSS

介紹

Mobile css的標準也是有些復雜的,與前一篇文章中提到的類似,之前存在著一個W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0,事實上它們都是CSS 2.1的子集,而且內容非常接近,不同的是,WAP CSS 1.0針對移動設備加入了一些擴展,這些擴展通過-wap-前綴來實現。

后來,W3C將二者進行了整合,吸收了WAP CSS1.0的一些優點,推出了CSS Mobile Prifile 2.0規范,它也是CSS 2.1的一個子集。我們本文將主要討論這個規范。

CSS Mobile Profile 2.0中的CSS支持

因為這是CSS 2.1的一個子集,那么我們對這個規范的內容應該不會陌生,我們通過這個表格可以很直觀的看到CSS MP對CSS的支持情況:

注1:border-style只支持常用的none、dotted、dashed、solid和inherit,其它的幾個并沒有被列入規范。
注2:display僅限于inline、block、list-item、none和inherit,不支持run-in和inline-block
注3:overflow只支持auto
注4:overflow-sytle只支持marquee值
注5:font-size只支持大小關鍵詞,比如small、medium、bigger等,px、pt和百分比等不被支持。
注6:text-decoration只支持none、blink、underline和inherit等,overline、line-trough不被支持。
注7:vertical-align 只支持top, middle, bottom, baseline 和inherit。sub, super, text-top, text-bottom, 百分比和長度不被支持
注8:@media規則只支持 handheld 和all 媒體類型。
用法與瀏覽器支持
就像之前文章里面提到的那樣,目前絕大多數的手機是支持XHTML Basic 1.0和XHTML MP 1.0標準的,這就意味著在某種程度上移動網站的HTML/XHTML代碼是可以與桌面版的相兼容甚至完全一致的。甚至有些網站的移動版直接使用HTML 4/5或者XHTML 1.0的DTD。這樣移動版網站可以直接通過handheld的media type來制定一個移動頁面專用的CSS文件:

1
 <link rel="stylesheet" media="handheld" href="">

絕大多數傳統手機上的瀏覽器都支持handheld媒體類型,包括opera mini和windows mobile中的IE。

其實考慮到傳統手機的自身的限制和移動網絡速度的限制,通過media type來加載外部樣式是不可取的,通常用于移動版頁面的樣式不多,而多加載一個外部樣式的代價是巨大的。所以,大部分的網站的移動版采用在head中嵌入樣式表的方式。

如果,你一定要采用外部樣式的話,最好不要用@import,因為有些手機瀏覽器并不支持。

特別值得一提的是,mobile webkit(包括iphone safari和android chrome lite等)不支持handheld。

而在視覺上的差異,主要是字體的表現差異,這和各個手機瀏覽器有關,想要做的像素完美,不是件容易的事情。

總結
雖然,移動網站貌似不用考慮太多的功能,布局簡單,功能簡單,但是現實并沒有想象中的那么簡單。移動網站面臨的最大的問題是瀏覽器眾多,手機終端差別又很大,開發的時候,會遇到這種細節問題。

目前國內移動網站的前端開發,還處于起步階段,隨著iPhone和Android等智能手機的流行,針對高端智能手機設備的網站開發將逐漸盛行,如 @SMbey0nd 所言,Mobile Web風暴,即將席卷中國,對于這個相對較新的領域,我們還有很多事情要做。


 

+86 0898 - 88268886

您可以隨時聯系我們。

我們將為你提供完全免費的項目咨詢服務。

Email:sy.hn@qq.com

?

三亞眾盛科技有限公司 版權所有

Copyright? 2012 www.575281.tw, All rights reserved. 瓊ICP備10200208號-2

業務咨詢: 0898-3188 8188

浙江快乐12走势图表 浙江快乐12开奖走势图 众彩网大乐透预测网页 内蒙古时时彩wifa mg视讯app 广东快中彩开奖走势图 ea同步平台真人百家乐 体彩20选5开奖结果 pk10不贪心怎么稳赢 江苏7位数开奖时间 白姐露透码包你赢网址 浙江飞鱼管业 e路发娱乐城真人百家乐 刘佰温四肖中特期期免费 广东时时彩走势 亿客隆 游戏视讯接口收费吗