메타 뷰포트 태그 변경

메타 뷰포트 태그를 시각적 뷰포트의 너비에 따라 변경해야합니다. 나는 그것을하는 방법을 안다 그러나 일하지 않는다, 나는 사이트가 그것의 효력을 발휘하기에는 너무 늦은 JS를 실행하고 있기 때문에 그것이다고 생각한다. 이것일지도 모르지만 이것은 나의 첫번째 생각이다. 내 application.js에서메타 뷰포트 태그 변경

파일 :

$(document).ready(function() { 

    // If screen width is 480 or less then add meta viewport tag 
    // (so default mobile display is used on iPads until that optimised view is added) 
    if (window.innerWidth <= 480) { // This looks at the size of the visual viewport 
    $('#viewport').attr('content', 'width=device-width'); 
    } 

}

내 index.html을에서 :

나는 그것을 실제로 적용됩니다 있도록 가능한 한 빨리 실행하는 데 그 블록을 얻을 수있는 방법

<meta id="viewport" name='viewport'><!-- content attr is added via JS -->

어떤 아이디어 ?

감사 닐

출처

2012-06-17 rctneil

당신은'$ ('meta [name = "viewport"]'). attr ('content', 'width = device-width');'를 사용 해보려고 했습니까, 이것이 선택기 문제가 아니 었습니까? – Ohgodwhy

나는 원래의 생각 때문이 아니라는 것을 알아 냈습니다. 그것은 내 아이폰 4S에서 window.innerWidth가 480이나 그 이하가 될 것으로 예상 할 때 980을 반환한다는 사실 때문입니다 (초상화는 320이어야합니다). PPP가 여기 http://www.quirksmode.org/mobile/tableViewport.html에서 언급 했음에도 불구하고 CSS 픽셀보다 오히려 장치 픽셀이 반환되는 것처럼 보입니다. window.innerWidth는 CSS 픽셀을 반환합니다. 어떻게하면 장치 픽셀이 아닌 시각적 뷰포트의 CSS 픽셀을 반환 할 수있는 아이디어가 있습니까? – rctneil

그것은 당신이 생각하기 때문에가 아니라, 장치의 버그이고,'setTimeout (theFunction, 200)'에 함수를 감싸는 것입니다; 그게 작동하는지 알려주세요. – Ohgodwhy

당신은 장치의 dpi로/정의의 문제로 실행할 수 있고, 기본적으로 하나의 화소는 하나의 화소와 동일하지 않다. 이것은 매우 연구하기 쉽습니다.

출처

2014-12-02 14:38:02 rfornal

메타 뷰포트 태그 변경

답변

관련 문제