CODEWITHSUNDEEP
mobile
enano2054
enano2054

Reputation: 329

Mobile Design CSS?

I am attempting to make my first mobile website by just using a different style sheet but I'm noticing it is more complicated than I expected. Everything is really different when I test both my iPhone 4S and my wife's android. What do I need to use to make it like Facebook's mobile site? Where you can't zoom in or out and it all just fits on your screen?

Upvotes: 2

Views: 569

Answers (2)

jsalonen
jsalonen

Reputation: 30481

In order to make sure your page doesn't need to be zoomed, add the following meta tag in your HTML:

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

It does the following:

  • Width of the viewport is scaled to your device's width (width=device-width)
  • Initial and maximum scales are set to 1.0
  • User scaling (zooming) is disabled

If you are looking for methods to allow your website to smoothly work for mobile devices, tablets as well as desktop devices, the keyword is responsive design (or responsive web design). Read this article on A List Apart to get started. Also for a hugely popular (very Facebook-like) responsive layout, see Twitter Bootstrap. For highly mobile optimized UI components, I really recommend taking a look at jQuery Mobile.

Upvotes: 1

sachleen
sachleen

Reputation: 31121

Take a look at Apple's documentation in the Safari Developer Library. Basically you need to use meta tags to tell the browser your website is mobile capable. You can customize the pinch zoom style and stuff using these tags too.

Specifically, you want

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

Should probably note that some of the things described in the Safari Developer Library will only work on iOS devices. The code above should work on Android as well as iOS, though.

Upvotes: 0

Related Questions