<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
|
1 2 3 |
@media screen and (min-width: 100px) and (max-width: 1100px){ } |
iPad issues:
-
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是目前的標準模式
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!