iPad layout scales up when rotating from portrait to landscape

by

—— Update ——

This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6.

—— Original answer ——

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

Keep the Markup scalable

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

Then disable scalability with javascript until gesturestart with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0";
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content="width=device-width, minimum-scale=0.25, maximum-scale=1.6";
        }, false);
    }
}

More Related Contents:

  1. What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
  2. How is the meta viewport tag used, and what does it do?
  3. Element not located at bottom of viewport
  4. vs
  5. Force browser to clear cache
  6. Force to open “Save As…” popup open at text link click for PDF in HTML
  7. Provide an image for WhatsApp link sharing
  8. Which are the standard W3C meta tags?
  9. How do you disable viewport zooming on Mobile Safari?
  10. Base64 images to gmail
  11. IFRAMEs and the Safari on the iPad, how can the user scroll the content?
  12. Why does vw include the scrollbar as part of the viewport?
  13. What happens if the meta tags are present in the document body?
  14. What does the shrink-to-fit viewport meta attribute do?
  15. How can I create equal width/height boxes that fit the screen width? [duplicate]
  16. How to place a div over a image? [closed]
  17. Can I nest a element inside an using HTML5?
  18. Inputting a default image in case the src attribute of an html is not valid?
  19. target=”_blank” vs. target=”_new”
  20. HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)
  21. Is there a way to style part of an input field’s value? [duplicate]
  22. Assign an initial value to radio button as checked
  23. How to change color of disabled html controls in IE8 using css
  24. Printing HTML table with many columns/rows using CSS layout?
  25. Is it OK to use a self closing DIV tag? [duplicate]
  26. flex-grow not working in column layout
  27. Items that span all columns/rows using CSS grid layout
  28. How to get CSS to select ID that begins with a string (not in Javascript)?
  29. How to make a DIV not wrap?
  30. How to implement a Navbar Dropdown Hover in Bootstrap v4?

Leave a Comment