iPhone景观滚动

空页上

我发现了一些奇怪的，似乎只有iPhone Safari浏览器中出现：iPhone景观滚动

如果含量不大于视其可能无论如何滚动有点高。它甚至可以在空白页面上滚动一点点。（Safari的顶栏的高度？）

截图：

我没有看到在iPhone人像或iPad这个问题。我在模拟器中尝试了iOS 8和9。

我正在创建一个web应用程序，如果主体不高于视口的100％，不希望发生这种情况。

试试看：

<html> 
<head> 
    <style> 
     html, body { 
      overflow:hidden; 
     } 
    </style> 

    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> 
</head> 
<body> 
    123 
</body> 
</html>

来源

2016-08-17 Mick

更新答：

我发现最好的解决办法是，以消除默认移动事件。这并不会消除链接和功能的能力，但会阻止页面被滚动。然后，您可以使用@media设计您的页面，为横向/纵向和各种屏幕尺寸创建自定义CSS。在评论中链接@media例子。然后你可以通过jQuery或JavaScript实现滚动条。因为用于视口meta的IOS 8 minimal-ui已被移除，并且围绕横向的屏幕高度问题没有简单的方法。

document.ontouchmove = function(event){ 
 
    event.preventDefault(); 
 
}

html, body { 
 
     overflow: hidden; 
 
     position: fixed; 
 
    }

<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> 
 
</head> 
 
<body> 
 
    123456 
 
</body> 
 
</html>

来源

2016-08-17 15:31:35 drume

很抱歉，但它不工作。我仍然可以在横向滚动。你尝试过iPhone还是模拟器？ – Mick

您的权利，它不，在您的示例代码中，我有纵向滚动条，并忘记检查景观。快速谷歌后，我发现你将不得不使用@ media创建基于方向的独立样式。教程可以在这里找到：[链接]（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp） – drume

答案更新@Mick – drume

iPhone景观滚动

回答

相关问题