はこれが私のウェブサイトで、小さな画面にそれを調整することはできません。すべての画面が、iPhone上で私のヘッダがiphoneに大きすぎるとレイアウトを壊し、
、すべてが正常に動作するようです。タイトル（ヘッダーの黄色のTOURBILLON）はletter-spacingですが、デスクトップ上では何らかの理由でそれを理解することは非常に困難ですが、iPhoneではかなりです。いずれの場合においても
、何が起こることはEHのiphone上で、言葉が大きすぎると、すべてが壊れます：
私は多くのことを試してみました。 max-widthをdivに設定し、ヘッダーテキスト（<h1>）を内側に置いて（divを呼び出すと.limitheader）;私はできるだけ多くのコンテナまたはanhwhereの中でprettyh内に-webkit-text-size-adjust:100%;を試しました。
...それはiPhone上のスタイル方法を決定するために@mediaを使用して、私はそれらすべてを台無しに、または単に正しいことをやっていないかもしれないと思います。誰かが私に解決策を与えることができれば、それが機能する限り（そしてiPhoneの画面にフィットする大きさを保つ）、それはすばらしいでしょう。私はまた、なぜコンテンツの残りの部分が単に右にいっぱいになるのか理解できません。とにかく...
更新日： 私は正しいCSSファイルを更新していませんでした。今、問題は次のように見えます。letter-spacingと異なる値を@media(min-width:768px)と@media(max-width:767px)に設定することはできません。私は別の値を割り当てる場合は、より大きな画面サイズから1つを取ると、すべてのサイズで適用されます。
これは私のコードです：
HTML
<header>
<div class="header-content">
<div class="header-content-inner">
<div class="limitheader"><h1>TOURBILLON</h1></div>
</div>
</div>
</header>
CSS
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #F9C000;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .header-content {
position: relative;
width: 100%;
padding: 100px 15px;
text-align: center;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
letter-spacing: 20px;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
.limitheader {
max-width: 100vh;
}
header .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: #F9C000
;
}
@media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
@media(max-width:767px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
THANKS！
何も応答がありません。とても奇妙です。 私も試みた： 'ヘッダH1 { 遷移：0.3秒フォントサイズ; } '' @media（最大幅：400px）{ h1 { font-size：21px！important; }ヘッダ.headerコンテンツ。header-content-inner h1 { font-size：7vw; } } ' – votgaus
正直、私はばかだ。私は誤ったCSS文書を編集していて、変更していないものを更新しています。今私はそれを変更するときに少なくともものは起こります。まだ動作していません。新しい問題の投稿を編集します。 – votgaus