모바일 용 iframe이있는 html 페이지

Question

휴대 기기에서 웹 페이지가 잘 보이도록 조정하려면 어떻게해야하나요?

페이지에 iframe이 있습니다. Iframe에는 고정 게재 위치 div를 사용하는 html5/javascript 게임이 포함되어 있습니다. 그 iframe을 확장하고 싶습니다.

대단히 감사합니다.

Answer 1

편집 :

은 내가 오래 전에 쓴 알고 있지만, 여기에 최신 브라우저를위한 최고의 솔루션입니다 : CSS 미디어 쿼리.

HTML 옵션과 약간 비슷한 CSS Medial Queries는 브라우저 크기에 따라 모든 요소를 ​​리플 로우하는 네이티브 방식입니다.

나는 일반적으로 표준 980 픽셀의 웹 사이트에 자신을 기반으로, 거기 이러한 미디어 쿼리 사용에서 적응 : 브라우저가 하나에 가장 높은 최소 폭에서 아래로 계단식 것 같은

@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 
} 

순서는 중요하다을 필요해. http://css-tricks.com/css-media-queries/

ORIGINAL POST :

당신은 단순히마다 화면 크기에 대한 특정 모양을 제공하는 조건 CSS를 사용할 수

크리스 Coyer에서 CSS-Tricks.com 여기에서 좋은 사례가있다. 당신이 할 수있는 몇 가지 방법이 있습니다 : 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"> 

자바 스크립트 :이 예는 항상 신뢰할 수 없습니다 브라우저 감지를 포함,하지만 난 다음 코드로 꽤 좋은 결과가 있었다 :

<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 파일을 선택하십시오.