1
モバイルデバイスでピンチズームを使用してウェブページのサイズを縮小すると、グラデーションが繰り返されてしまいます。これをやめるためにとにかくありますか？CSSとHTMLモバイルデバイスで縦横にリピートグラデーションを繰り返さないようにする方法
他のすべての要素が動的で適切にサイズ変更されるので、グラデーションのサイズを変更したいと思います。ここで
は、これまでの私のコードです：
html {
text-align: center;
min-height: 100%;
max-width: auto;
background: #33ccff;
background: -webkit-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
background: -moz-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
background: -o-linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no-repeat;
background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) no- repeat;
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-x: hidden;
}
body {
text-align: center;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
text-align: left;
}
.off {
color: #F0FFFF;
}
#header {
height: 100px;
width: 960px;
}
#header h1 {
position: relative;
text-align: left;
color: #000000;
font-size: 45px;
left: 5px;
top: 20px;
}
#navigationBar {
height: 40px;
background-color: #F0FFFF;
border-color: #000000;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#navigationMenu {
margin-top: 0px;
height: auto;
background-color: #F0FFFF;
border-color: #000000;
border-radius: 25px;
}
#transparentBox {
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: max-width;
height: max-height;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.7);
filter: Alpha(opacity=0.7);
border-color: #000000;
border-radius: 10px;
}<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>
<div id="navigationBar">
<ul>
<li><a href="http://www.calebwolff.us">Home</a></li>
<li><a href="https://www.facebook.com/calebwolffmusic/" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/calebwolffmusic/" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/caleb-wolff-
07594aab" target="_blank">LinkedIn</a></li>
</ul>
</div>
<div id="transparentBox">
<h1>Hello! Welcome to my website!</h1>
</div>
これはhtml要素のスタイリングに関連する可能性があります。ラッパーdivに背景を適用し、その要素のサイズをvwとvhの単位（幅：100vw）を使用してビューポートに設定してみてください。 – corse32
@ corse32私はあなたの提案を変更しましたが、私のページのモバイル版には影響していないようです。モバイルブラウザでcalebwolff.usにアクセスすれば、私が何を話しているのか分かります。 –
hmmm ok、iOS Safariでズームアウトできないため、ここで問題を再現できません。ご迷惑をおかけします。 – corse32