Apple's Website - How Does It Autosize Itself For Mobile Devices?


Tags: css,html5

Problem :

I just asked a question about centering elements, and given what I had to do with that (wrapping several elements with another element just to get them to display similarly to Apple's layout and having to specify a width in order to center the ), how exactly do they get the site to work so nicely on mobile devices? Is there something I'm doing wrong? Here is the CSS I'm using for my page.

body
{
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000000;
background-color: #E4E0E0;/*;*/
/*background-attachment:fixed; used to fix a background image so only text scrolls*/ 
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;  
}

.wrapper
{
margin:auto;
width:950px;
}
.homediv
{
background-color:#F7F7F7;
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
/* width must be defined in the actual element */
-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
text-align:center;
padding:4px;
 }

.homediv:hover
{
background-color:#FFFFFF;
cursor:pointer;
}

.homediv img
{
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}

What do I need to change in order to make the site automatically fit on screen sizes? The way it's currently set up, I have to specify widths within the elements themselves...



Solution :

They probably use CSS Media Types and Media Queries to use different stylesheet(s) depending on the media it's being presented on (e.g., screen, handheld).

There's a great article on ALA which prominently feature these techniques: "Responsive Web Design".


    CSS Howto..

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    How to strech vertically the container of inline-blocks?

    How to center my a div in a table using CSS?

    How to use css selector with class prefix by dojo?

    How to change the color of the text next to an input field in an HTML form?

    Use CSS to show two div's with background image over a containing div

    Getting the title of a picture overlayed onto the picture of a slideshow

    Showing a time countdown progress bar

    How to correct checkbox position, when it is one the same page with jQuery UI input text?

    How would i change the colour dynamically depending on the width

    How to hide div for specific height or width using CSS [duplicate]

    How do I change the :-moz-placeholder color with jQuery once it's set?

    How can I center text on an image using Bootstrap?

    Changing the color of the tomb. How do I do this?

    How to create a list with three columns in a row by css and html?

    How to have equal padding on both side of a div. CSS

    How to give style to iframed page content using parent pages css?

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How do you change the appearance of a button in javascript?

    How to use css with UIWebView?

    How to calculate padding-top in % of the given div relative to its parent div

    How to make div's inside div responsive

    How to style five rows with alternating fixed/variable width?

    How to make this inner div vertically centered? (Using CSS)

    How to make cut off in CSS as shown in the attached image?

    Tricky: In CSS and HTML, how to make a sub DIV go under the container if the container has a z-index of 0?

    How to Change Text Color with CSS Transitions?

    How to make parent div above child div without position absolute?

    HTML CSS - How to put button at the center of my page

    Inner div has borders - how to override with a class on an outer div?