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" />
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
@media screen and (min-width: 100px) and (max-width: 1100px){

iPad issues:
  1. Width of both landscape and portrait mode is 980px;
    min-width: 980px;

box model的處理

     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;


One thought on “Mobile CSS

  1. 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.