Advanced Search

iPhone Safari Viewport Scaling Bug

/ Published in: JavaScript
Save to your folder(s)
"Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view."

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. (function(doc) {
  3.  
  4. 	var addEvent = 'addEventListener',
  5. 	    type = 'gesturestart',
  6. 	    qsa = 'querySelectorAll',
  7. 	    scales = [1, 1],
  8. 	    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
  9.  
  10. 	function fix() {
  11. 		meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
  12. 		doc.removeEventListener(type, fix, true);
  13. 	}
  14.  
  15. 	if ((meta = meta[meta.length - 1]) && addEvent in doc) {
  16. 		fix();
  17. 		scales = [.25, 1.6];
  18. 		doc[addEvent](type, fix, true);
  19. 	}
  20.  
  21. }(document));
  22. </script>

URL: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.