1

Problem:

Fixed element in iPhone 6 plus (landscape mode) is NOT clicked

Source:

Below is whole source 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>

The "a#menu" element is not clicked (or touched) in iphone 6 plus(landscape mode).

Problem Pictures

Below is safari developer mode.

enter image description here

I captured physical device screen, iPhone 6 plus.

In screen, grey box is visible area. and blue box is clickable area.

In screen, grey box is visible area. and blue box is clickable area.

What did i do wrong?

github link: https://github.com/soredive/iphone6plus_landscape_problem

soredive
  • 795
  • 1
  • 9
  • 25

1 Answers1

0

You could try using css media queries to relocate the item once screen mode changes to landscape,

<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>

It worked for me!

rrmonn
  • 25
  • 5
  • It doesn't work. Color is applied, box color is changed to red, but box doesn't be clicked. – soredive Mar 10 '16 at 02:13
  • Yeah, I notice that too after few tries, I tried reloading the site everytime orientantion is changed with this $(window).bind('resize', function() { location.reload(); }); – rrmonn Mar 10 '16 at 02:29
  • http://rrmonn.com/test/test.html , hope it works for you, or you could check this : http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change – rrmonn Mar 10 '16 at 02:34