Mobile Website Development

I am trying to make a mobile website but I'm not exactly sure how to declare the document or how to tell the browser to focus on the area with the main content instead of the entire webpage. On mobile websites, the phone displays the content without displaying parts of the page that does not have information. How do I declare the开发者_如何学C document and how do I focus the page like this?

You'll have to create another CSS file.

You can do this with just an alternate CSS file which hides irrelevant information and changes the width, font size, etc., to optimize for mobile browsers, such as this:

<link rel="stylesheet" href="handheld.css" media="handheld"/>

Alternatively, you can make a separate version of your website (like http://m.example.com/) so you it actually loads different content with a different CSS. Either way, it's not as easy as telling the browser to display it for mobile.

One way to do this that some people have a problem with are media queries. You can tell certain parts of your CSS to only apply if the screen is greater or less than a certain width. You can do this in your file with the @media command, or in the link element in your HTML with the media attribute.

More information about CSS media queries.