Search code examples
htmliosmobileoperaopera-mini

Opera Mini 8 on iOS 7 has strange page rendering with meta viewport tag

After update Opera Mini on iOS to 8+ version, there is a strange render bug in landscape orientation:

enter image description here

enter image description here

Example on screenshots(jsbin), html only:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
    <div>
      Any big text here...
    </div>
</body>
</html>

You can reproduce it with jsbin example:

  1. Open in portrait orientation jsbin example in Opera Mini 8 on iOS 7 - the page width is 100% of screen width
  2. Rotate to landscape orientation - the page width is more less than 100% of screen width
  3. Scroll to bottom - there is a free space after page

How can I fix this?

Solution

  • The problem is in <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">.

    If I remove it in html(jsbin) - all looks fine. But user can scale now and on landscape orientation the page is zoomed.

    HTML without this ugly behaviors:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
    </head>
    <body>
        <div>Any big text here...</div>
    </body>
</html>

    EDIT:

    Opera Mini developers answer to my letter. This is fixed in 8.0.2 version