Responsive Web Design and high resolution displays (iPhone 4/5)

后端未结

关注

 2  1732

野性不改

I have recently started toying around with responsive web design and have done a basic test here:

http://test.studev.net/

It works fine in a desktop browser

相关标签:

2条回答

予麋鹿

2020-12-28 19:34

You can choose the size of the font according to the screen-width:

    /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

To make sure your layout stretch on the mobile screen you have to use the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This meta tag needs to be inside the head tag. The "device-width" will be the maximum pixels your screen can show. You can also set a constant value there (600px).

The initial-scale=1 means it will be zoomed automatically to 100%. (0.5 => 50%)

0 讨论(0)

长情又很酷

2020-12-28 19:57

Well either if you want to make the text smaller on mobile or bigger you would do

@media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

@media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

And make sure you have this in your <HEAD> tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Or you can also disable zooming like so:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

And for IE10 support, try:

@-ms-viewport{
    width:device-width
}

0 讨论(0)