2016-08-17 4 views
1

の私はiPhoneのSafariで発生すると思われる奇妙な何かに気づきました。空のページで少しでもスクロールすることも可能です。 (サファリtopbarの高さ?)iPhoneの風景をスクロールしても、空のページ

スクリーンショット: enter image description here

enter image description here

私はiPhoneの肖像画やiPad上でこの問題を参照してくださいいけません。私はSimulatorで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> 

答えて

0

更新回答:私が見つけ

ベストソリューションは、オン既定移動イベントを削除することでした。これは、リンクと機能を持つが、ページがスクロール可能にならないようにする機能を削除しません。 @mediaを使ってあなたのページをデザインして、風景/肖像画やさまざまな画面サイズのカスタムCSSを作成します。コメントの@mediaの例のリンク。その後、jqueryまたはjavascriptを使用してスクロールバーを実装できます。ビューポートメタの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>

+0

申し訳ありませんが、その動作していません。私はまだランドスケープでスクロールできます。 iPhoneやSimulatorで試しましたか? – Mick

+0

あなたの権利は、あなたのサンプルコードでは、私は肖像画でスクロールバーを持っていて、風景を確認するのを忘れてしまった。速いgoogleの後に、@ mediaを使ってオリエンテーションに基づいて別々のスタイルを作らなければならないことがわかった。チュートリアルはここにあります:[リンク](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) – drume

+0

答えが@Mick – drume

関連する問題