뷰포트 메타 태그 제거 버그

내 웹 페이지에는 절대 "메타"뷰포트 태그가 없습니다.뷰포트 메타 태그 제거 버그

var viewportMeta = document.createElement('meta'); 
    viewportMeta.setAttribute('id', 'myMeta'); 
    viewportMeta.setAttribute('name', 'viewport'); 
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');

을하고«머리»에 (일부 사용자 작업 후)를 추가 :

나는 동적으로 내 자신의«메타»뷰포트 태그를 생성 한 다음

document.head.appendChild(viewportMeta);

(사용자가 클릭 한 후 어떤 단추에) 나는 "머리"에서 "myMeta"«메타»꼬리표를 제거 할 필요가있다 :

var myMeta = document.getElementById('myMeta'); 
document.head.removeChild(myMeta);

그리고 그것은, 100 %를 제거한다! 데스크톱 브라우저 및 iPad의 Adobe Edge Inspect Weinre를 통해 확인했습니다.

하지만 전체 페이지가 이전 상태로 이동하지 않습니다! 전체 페이지는 "viewportMeta"객체의 모든 정의 된 속성을 가진«메타»뷰포트 태그를 가진 것처럼 동일하게 유지됩니다.

그래서 메타 뷰포트 태그를 완전히 제거 할 수있는 방법이 있습니까? 어떤 아이디어?

(.이 문제는«메타»태그를 제거하지 않으려 고 노력 아이 패드의 사파리와 크롬 브라우저에 있지만 그냥«내용»숙박 시설의 변경 -.. 성공없이 안드로이드 기기와 브라우저에서 확인하지 않았다)

출처

2013-05-29 artuska

당신 뷰포트 메타 태그의 원래 값을 복원해야합니다

<html> 
<head> 
    <title>test dynamic view port</title> 
</head> 
<body> 
    <button id="turnOn">on</button> 
    <button id="turnOff">off</button> 

    <script type="text/javascript"> 

     function turnOnDeviceViewport() { 

      removeMetaIfExist(); 

      var viewportMeta = document.createElement('meta'); 
      viewportMeta.setAttribute('id', 'myMeta'); 
      viewportMeta.setAttribute('name', 'viewport'); 
      viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no'); 

      document.head.appendChild(viewportMeta); 
      alert("click"); 
     } 

     function turnOffDeviceViewport() { 

      removeMetaIfExist(); 

      var viewportMeta = document.createElement('meta'); 
      viewportMeta.setAttribute('id', 'myMeta'); 
      viewportMeta.setAttribute('name', 'viewport'); 
      viewportMeta.setAttribute('content', 'width=980, user-scalable=yes'); 

      document.head.appendChild(viewportMeta); 
      alert("click"); 
     } 

     function removeMetaIfExist() { 

      var metaElement = document.getElementById("myMeta"); 
      if (metaElement) document.head.removeChild(metaElement); 
      alert("removed"); 
     } 

     document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false); 
     document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false); 

    </script> 
</body>

당신은 애플의 개발자 웹 사이트에 뷰포트 메타 기본값에 대한 세부 정보를 찾을 수 있습니다

: Safari HTML Reference: Supported Meta Tags

EDIT : 기본값 viewport 값 "너비 = 980, 사용자 확장 가능 = 예"가 모든 장치 및 브라우저에서 동일하지 않을 수 있으므로 완전한 솔루션을 위해서는 실행중인 브라우저를 식별해야합니다. 그에 따라 기본값을 설정하십시오

출처

2013-05-29 13:56:08

나는 귀하의 조언을 테스트했지만 성공하지 못했습니다. "width = device-width"에서 기본 너비 또는 컨테이너 너비보다 작은 너비 (예 : 1200 픽셀로 크기가 조정되지만 980 픽셀로는 변경되지 않음)로 절대 업데이트되지 않습니다. "user-scalable = no"를 "user-scalable = yes"로 변경하면 완벽하게 작동합니다. 그러나 "device-width"를 기본 너비로 업데이트해도 성공하지 못합니다. – artuska

Android 4.0.4와 함께 Chrome에서 테스트 한 결과 작동합니다. 나중에 Apple 기기 용으로 업데이트하겠습니다. –

@ArielDeil 일단 뷰포트 메타 태그를 제거하면 추가 할 수 있습니까? 나는 버튼 클릭시 메타 태그를 추가하고 제거해야한다는 뜻입니다. 나는 또한 아래 WebSettings 자바 파일 코드를 가지고 = appView.getSettings(); \t \t settings.setBuiltInZoomControls (true); \t \t settings.setSupportZoom (true); \t \t settings.setDefaultZoom (ZoomDensity.MEDIUM); 이걸 확인해 주시겠습니까 ?? – Mallikarjun

답변

관련 문제