time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】15、解决iPhone safari浏览器viewport缩放的bug引起的问题

【HTML5实践教程】15、解决iPhone safari浏览器viewport缩放的bug引起的问题

时间:2012-12-06 00:04 点击:1497次 字体:[ ]




   从事过iphone响应式设计的人,一定清楚iphone safari浏览器viewport 缩放的bug。当你将viewport的宽度设计为设备宽度,并将iphone旋转到 landscape 视图的时候,bug就会发生。你可以使用iphone访问demo地址,将视图从 portrait 切换到 landscape,来查看该bug。今天我们将尝试修复这个问题。

  

  问题

  下面截图展示了该bug。

【HTML5实践教程】15、解决iPhone safari浏览器viewport缩放的bug引起的问题_www.fengfly.com

  解决方案1:使用Meta标签快读修复(demo

  一个快速的修改办法是,为viewport 设置如下属性 maximum-scale=1。副作用是,页面不能被执行缩放操作了。

  1. <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1"> 

  解决方案2:使用javascript(demo

  为了可用性的考虑,上面的办法是不可行的。我们可以在head中,通过添加下面的javascript脚本来完美的解决这个问题。脚本来源:https://gist.github.com/901295

 

  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 ((metameta = 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> 

  原文地址:http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

 

转自:http://www.cnblogs.com/softlover/archive/2012/12/01/2787555.html



本文地址 : http://www.fengfly.com/plus/view-210748-1.html
标签: HTML5 BUG iPhone viewport
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: