jquery - Is it ok to just have <meta name="viewport" content="width=device-width"> -
i have 960px
wide website , managed make responsive mobiles. styles apply devices under 767px
, looking on mobiles , small tablets.
then ipad portrait
came play. looking on landscape
not on portrait
long have <meta name="viewport" content="initial-scale=1,maximum-scale=1,width=device-width">
in header.
then created different jquery events
check portrait
and change viewport
everytime, issues.
this have far. code isnt question. question is, ok leave <meta name="viewport" content="width=device-width">
in header , tested on ipad, iphone, android, samsung, kindle fire (on simulator) , seem work fine now. im wondering need have initial-scale=1,maximum-scale=1
?
my code doesnt work well.
var isipad = navigator.useragent.match(/ipad/i) != null; if(isipad){ jquery(window).bind('orientationchange', function(e) { switch ( window.orientation ) { case 0: //port jquery('meta[name=viewport]').attr('content','width=device-width'); alert('1'); break; case 180: //port jquery('meta[name=viewport]').attr('content','width=device-width'); alert('2'); break; } }); } else if(!isipad){ jquery('meta[name=viewport]').attr('content','width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1'); }
you can use meta in header
<meta name="viewport" content="width=device-width, height=device-height" >
you can in css using @media tags
@media screen , (device-width: 768px) { /* general ipad layouts */ } @media screen , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:portrait) { /* portrait layouts */ } @media screen , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:landscape) { /* landscape layouts */ }
Comments
Post a Comment