1 – The layout
When you’re done with your non-responsive website, the first thing to do is to paste the following lines within the
<head> and </head> tags on your html page. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
2 – Medias
When you're done with 1step, use the following @media css for each device landscape or portrait.
@media only screen and (max-device-width: 480px) and (orientation: landscape) {
/*style for iphone landscape*/
}
@media only screen and (max-width : 320px) {
/*style for iphone portrait*/
}
@media only screen and (min-device-width : 769px) and (max-device-width : 1024px) and (orientation : landscape)
{/*style for ipad landscape*/
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
/*style for ipad portrait*/
}
No comments:
Post a Comment