メタタグ

Question

当初、私は、metaタグを使用：このタグを使用してオン

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

を、初期の負荷に、ページがランドスケープモードで美味しそうでしたが、私はポートレートや背中に向きを変更するとき風景モードにすると、ページがズームアウトされます。

は、その後、私は私のページに次のメタタグを試してみました：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 

ページがランドスケープモードに収まるものの、私はポートレートモードの詳細コンテンツを視聴するには、スクロールバーが表示されません。

ページを横向きモードまたは縦向きモードに合わせるにはメディアクエリを使用する必要がありますか、それを達成するためのメタタグがありますか？

Answer 1

私はこれに良い解決策を見つけた：

メタタグ：jQueryを使って

<meta name="viewport" id="viewport" content="width=device-width,minimum- scale=1.0,maximum-scale=10.0,initial-scale=1.0" /> 

はJavaScript：

var mobile_timer = false; 
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-  scale=1.0,initial-scale=1.0'); 
$(window).bind('gesturestart',function() { 
    clearTimeout(mobile_timer); 
    $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0'); 
}).bind('touchend',function() { 
    clearTimeout(mobile_timer); 
    mobile_timer = setTimeout(function() { 
     $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0'); 
    },1000); 
}); 
} 

ジェスチャーが検出されない限り、スクリプトは基本的にiPhone上でズーム禁止し、ちょうどあなたのhtmlでそれを精緻化し、あなたは行くべきであるはずです;） 出典：http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape

私はまた、リンクが素晴らしい記事であるとされたiPhone

@media screen and (max-device-width: 480px) 
{ 
    html 
    { 
     -webkit-text-size-adjust: none; 
    } 
}