モバイルのiframeを使用したHTMLページのスケーリング

Question

携帯端末でウェブページを拡大表示するにはどうすればよいですか？

私はiframeを持っています。 Iframeには固定位置divを使用するhtml5/javascriptゲームが含まれています。私はそのiframeも同様に拡大したいと思う。

ありがとうございました。

Answer 1

EDIT：

私は長い時間前にこれを書いたが、ここ最近のブラウザに最適なソリューションです知っている：CSSメディアクエリ。

HTMLのオプションのように、CSS Medial Queriesは、ブラウザのサイズに応じて要素をリフローする固有のアプローチです。

私は通常、標準980pxウェブサイト上で自分自身をベースに、これらのメディアクエリを使用して、そこからそれを適応させる：

@media (min-width: 1920px) { 
// Your CSS here 
} 

@media (min-width: 1280px) { 
    // Your CSS here 
} 

@media (min-width: 768px) { 
    // Your CSS here 
} 

@media (min-width: 0px) { 
    // Your CSS here 
} 

ブラウザが一つに最高の最小幅からダウンカスケードうと順序が重要ですが必要だ。

CSS-Tricks.comからクリスCoyerからの偉大な例がここにあります http://css-tricks.com/css-media-queries/

オリジナルのポストは：

あなたは単にそれをすべての画面サイズのための具体的な外観を与えるために、条件付きCSSを使用することができます。あなたはそれを行うことができるいくつかの方法があります：JavascriptまたはHTML（より速い）で。

HTML：この例では、デバイスの解像度が481px以上1024px未満の場合、特定のCSS（この場合はiPad_Portrait.css）を使用します。超高解像度ディスプレイを搭載したiPhone 4や4Sを搭載していても、iOSデバイスではうまく動作します。しかし、アンドロイドの高解像度ディスプレイでは全く動作しません。

<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPad_Portrait.css" type="text/css"> 

のJavaScript：この例では、常に信頼できるものではありませんブラウザの検出を含むが、私は次のコードではかなり良い結果を持っていた：

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    if((/iphone|ipod/i.test(navigator.userAgent.toLowerCase()))) 
    { 
     // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPHONE SPECIFIC CSS. 
     $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css'); 
      } 
    else if ((/ipad/i.test(navigator.userAgent.toLowerCase()))) 
    { 
     // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPAD SPECIFIC CSS. 
     $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css'); 
    } 
    else if ((/android/i.test(navigator.userAgent.toLowerCase()))) 
    { 
     // DYNAMICALLY CHANGED THE CSS FILE FOR THE ANDROID SPECIFIC CSS. 
     $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css'); 
    } 
    else if ((/blackberry/i.test(navigator.userAgent.toLowerCase()))) 
    { 
     // DYNAMICALLY CHANGED THE CSS FILE FOR THE BLACKBERRY SPECIFIC CSS. 
     $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css'); 
    } 
    else 
     // IF NO MOBILE BROWSER DETECTED, MOST LIKELY IS A COMPUTER, THEN IT DEFAULTS   TO THIS FILE. 
     $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css'); 
    }); 
} 

<script> 

、あなたの頭の中でそのコードを入れた場合、それは意志それぞれのデバイスタイプに適したCSSファイルを選択します。