Question

问题：

未点击iPhone 6 plus（横向模式）中的固定元素

来源：

以下是整个源代码html。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <a id="menu" onclick="alert('clicked')" 
    style="position: fixed !important; bottom: 30%; 
    right: 30%; width: 80px; height: 80px; 
    background-color: #ccc;"></a>
</body>
</html>

iphone 6 plus（横向模式）中未单击（或触摸）“a＃menu”元素。

问题图片

以下是safari开发者模式。

我捕获了物理设备屏幕，iPhone 6 plus。

在屏幕中，灰色框是可见区域。和蓝色框是可点击的区域。

我做错了什么？

github链接： https://github.com/soredive/iphone6plus_landscape_problem

Answer 1

一旦屏幕模式更改为横向，您可以尝试使用css媒体查询重新定位项目

<body>
<style>

    #menu {
        position: fixed !important; bottom: 30%; 
right: 30%; width: 80px; height: 80px; 
background-color: #ccc;
    }
 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) { #menu{
      position: fixed !important; 
      bottom: 30%; 
      right: 30%; 
      width: 80px; 
      height: 80px; 
      background-color: red;
  }
  }

</style>
<a id="menu" onClick="alert('clicked')"></a>

它对我有用！

未点击或触摸iphone 6 plus中的固定元素

1 个答案: