Menu
How to make website that should compatibility with desktop browser as well as mobile browser?
400
There's the trick with alternative CSS files for desktop and mobile. Implemented in HTML header thusly:
<head>
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)"/>
<link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-device-width: 481px)"/>
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"/>
<!--[if IE]>
<link rel="stylesheet" href="desktop.css" media="screen" type="text/css" />
<![endif]-->
</head>
Then if you need alternative content for mobile and desktop, feel free to make parts of HTML visible on desktop and hidden on mobile, or vice versa.
Tried on iPhone and Android. Note that simply specifying "media="handheld"" in the ref tag or in the CSS file does not do the trick; iPhone does not consider itself a handheld.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
