4

ここに画像の説明を入力モバイル サファリのポートフォリオ サイトで水平スクロールを防止したいと考えています。このデザインは、ユーザーがメニュー項目をクリックして画面に遷移するまで、画面外にあるコンテンツ div を特徴としています。これはデスクトップでは問題なく機能しますが、モバイルでは、ユーザーが横方向にスクロールできる余白が大量に残ります。

サイトはhttp://www.robiannone.comです

このビューポートタグを使用しました <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />

そして、私はoverflow-x:hidden運がなくてもメディアクエリで使用しようとしました。overflow-x:hidden を html または body タグに追加しても何も起こりませんが、html タグと body タグの両方に追加すると、サイトが壊れて、ヘッダーの近くにスクロール バーが表示されます。私は他の解決策を探しましたが、これまでに役立つものは何も思いつきませんでした。意図的にコンテンツを画面外に配置しているため、機能しませんか?

あなたが提供できるどんな助けにも感謝します!

コンテンツ div の css は次のとおりです。

.web {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:1;opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-moz-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-o-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
-ms-transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
transition: opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
}
.video {
width: 953px;
height: 150px;
position: absolute;
margin-top:40px;
margin-left:0px;
z-index:500;
overflow:hidden;
opacity:0;
padding:7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
-webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-moz-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-o-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
-ms-transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
 transition:opacity 1s linear 0.3s, height 1s linear 0.3s, z-index 0.1s linear, margin-top 0.9s ease, margin-left 1.5s ease;
}
.about {
width: 953px;
height: auto !important;
position: absolute;
margin-top:40px;
z-index:9000;
opacity:0;
padding:7px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border-radius: 10px;

/*Transition Effect, Thanks css-tricks.com!  */
  -webkit-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -moz-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -o-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
  -ms-transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear, margin-top 1.5s ease, margin-left 0.9s ease;
    transition:opacity 1s linear 0.3s, height 1s linear 0.2s, z-index 0.1s linear,            margin-top 1.5s ease, margin-left 0.9s ease;  

/*Classes that Div's take once clicked*/
.prime{
width: 953px;
height: 750px;
background:rgba(255,255,255,.9);
margin-left:0px;
position: absolute;
margin-top:75px;
z-index:9001;
opacity:1;
overflow:auto;   
}

.third{
 width: 953px;
height: 200px;
opacity: 0.0 !important;
position: absolute;
margin-top:-499px;
margin-left:1810px;
z-index:1;
overflow:hidden;  
}

.secondary{
width: 953px;
height: 200px;
opacity: 0 !important;
position: absolute;
margin-top:499px;
margin-left:-1810px;
z-index:500;
overflow:hidden;   
}
4

1 に答える 1

1

メディア クエリを使用して、要素が小さな画面に読み込まれるときに要素に overflow:hidden を設定することで、同様の問題を解決しました。

だから私は私のcssに持っています：

  • オーバーフロー: スライドを待っているすべてのコンテンツで div に表示されます
  • overflow-x:hidden を html タグに追加して、コンテンツの幅が原因で作成される横方向のスクローラーを取り除きます
  • 画面が小さい場合、コンテンツ div に overflow:hidden を設定するメディア クエリ

ユーザーの観点からは、画面が 1024 ピクセルよりも大きい場合、どちらの側からでもコンテンツを画面にスライドさせる準備ができているという追加の視覚的効果の恩恵を受けるだろうと考えましたが、幅 960 ピクセルのサイトを 1024 ピクセル以下で表示すると、この影響は次のようになります。とにかくコンテンツがほとんど見えないので失われます。

html
{
    overflow-x:hidden;
}

@media only screen and (max-width: 1024px)
{
    overflowing_content_div { overflow:hidden; }
}

これにはハックの少ない解決策があり、1024pxよりも高い画面解像度のモバイルデバイスに対処するのに十分な将来性のある解決策があるかもしれません.もしそうなら、私はそれを聞きたいです.

于 2013-01-24T13:36:10.307 に答える