Mobile CSS

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

<link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />
 
<!–[if IEMobile]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]–>
 
Content of mobile.css:
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px){
/* Styles for mobile device here */
}
 
Apply CSS when screen width between 100px and 1100px
 
 
iPad issues:
  1. Width of both landscape and portrait mode is 980px;
    min-width: 980px;
 

box model的處理

手機版網頁在自動適應畫面寬度時,目前標準的padding算法會是個困擾,因為如果width:100%,加上padding可能就破版了,但不使用width:100%又很難估計內容的實際寬度。這時可考慮回復到IE6模式,把border和padding的移到box內部,如此一來宣告width為100%就能保證不破版。
 
div{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
}
*註:border-box是IE6的模式,content-box是目前的標準模式

 

One thought on “Mobile CSS

  1. brenda

    I do not even know how I ended up here, but I thought this post was good.
    I do not know who you are but definitely you’re going to a famous blogger if you are not already 😉 Cheers!

Comments are closed.