This is my first time working on a responsive website and I noticed a pretty unwanted feature in Safari on iOS7 (on iPhone 4s). This problem may persist in later versions of the OS, but I'm not sure.
Problem . As you can see in my gif above, there is no scrolling in portrait mode in the viewport, because the height of the html and body tags is 100% in CSS. The 3 divs you see are 33.33% high, which means that each one takes up one third of the page (which they do in portrait mode)
However, when the view switches to landscape mode and the user tries to scroll the page, the page scrolls as if the height was more than 100% of the viewing area. There should be no scrolling, because all elements must be exactly 100% of the height.
I understand that Safari automatically displays the user interface controls and the address bar when the screen is being listened to, then my question is, are there any ways to resize the site when the user interface controls appear? Or is there any way to just put everything on the page without scrolling when the user interface controls are present? I want to prevent scrolling at all, for example, when the site is in portrait mode.
My test site is here (maybe this should be seen only on the iPhone)
I put my code in the snippet below. I can not use jQuery for this. Thanks.
html, body{ margin:0; padding:0; width:100%; height:100%; background:#fff; font-family:Arial; overflow:hidden; } p{ margin:0; padding:0; } nav{ height:100%; } .vCenter{ position:relative; top:50%; -webkit-transform:translateY( -50% ); -ms-transform:translateY( -50% ); transform:translateY( -50% ); } .option{ margin:0; width:33.33%; height:100%; background:#transparent; text-align:center; text-transform:uppercase; font-size:110%; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; float:left; -webkit-transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease; transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease; } .option:hover, .option:active{ background:#0bb; color:#eee; } @media( min-height:299px ) and ( max-height:371px ){ .option{ width:100%; height:33.33%; box-sizing:border-box; } #function{ border-bottom:none; } } @media( height:372px ){ .option{ width:100%; height:124px; box-sizing:border-box; } #function{ border-bottom:1px solid #eee; } } @media( min-height:373px ) and ( max-height:568px ){ .option{ width:100%; height:33.4%; box-sizing:border-box; } #function{ border-bottom:none; } }
<!DOCTYPE html> <html lang="en-US"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"><meta name="author" content="Lynel Hudson"> <meta name="desciption" content="Front End Reference for Anyone"> <title>WEB</title><link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="base.css"> </head> <body ontouchstart=""> <nav> <div id="design" class="option"> <p class="vCenter">design</p> </div> <div id="function" class="option"> <p class="vCenter">function</p> </div> <div id="rule"></div> <div id="advanced" class="option"> <p class="vCenter">advanced</p> </div> </nav> <script> </script> </body> </html>
source share