Menu
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 however I am getting a little confused on how to deal with the smallest width design when loaded on a high resolution device for example retina displays on iPhones. Because of this type of display it means for example size 16px which is normal to read on a desktop is impossible to read on an iPhone 4/5.
How is this usually dealt with?
372
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 */
}
or
@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
}
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%)
36
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
