私のウェブサイトはデスクトップブラウザでは正常に動作しますが、モバイルデバイス(iOS、Androidなど)では、ズームインまたはズームアウトするたびに背景が再読み込みされ、ページ全体が更新されるように見えます。何が原因なのか疑問に思っていたのですが、今のところ問題の原因を突き止めることができませんでした。それはモバイルブラウジングを非常に苛立たせます。
すべてのCSSファイルとJavaScriptファイルは、私のページのソースにリンクされている必要があります。この問題の原因は何ですか?
私のウェブサイトはデスクトップブラウザでは正常に動作しますが、モバイルデバイス(iOS、Androidなど)では、ズームインまたはズームアウトするたびに背景が再読み込みされ、ページ全体が更新されるように見えます。何が原因なのか疑問に思っていたのですが、今のところ問題の原因を突き止めることができませんでした。それはモバイルブラウジングを非常に苛立たせます。
すべてのCSSファイルとJavaScriptファイルは、私のページのソースにリンクされている必要があります。この問題の原因は何ですか?
iPhoneをチェックしたところ、あなたが話していることがわかりましたが、ページがリロードされていないので、CSSをリロードして新しいサイズに調整することができます。
簡単なモバイル表示を有効にしようとしている場合は、モバイルスタイルシートを作成し、javascriptとphpを使用してcssスタイルシートを変更する必要があります。
私はその問題を解決することができました。問題は次のCSSにありました。
body
{
background-color:black;
}
div.back3
{
background-image:url("back.png");
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-100%;
padding:0;
height:400%;
width:104%;
}
div.back2
{
background-image:url("back.png");
background-position:250px 250px;
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-28%;
padding:0;
height:400%;
width:104%;
}
div.main
{
position:static;
}
これのどの部分が問題を引き起こしたのか正確にはわかりません。もう少し掘り下げますが、今のところ、このCSSスタイルシートがモバイル以外のデバイスでのみ使用されるように指定するために以下を使用しました。
<link rel='stylesheet' href='/z/styles/main-style.css' media='screen and (min-device-width:770px)'>
min-device-widthプロパティは、iPadもこのスタイルシートを使用しないようにするために、この高い数値に設定されています(ただし、マシンがiPadサイズに近い場合は問題が発生する可能性がありますが、このスタイルシートはそれほど重要ではありませんとにかく私のサイトの運用に)。
ありがとう!編集:モバイルデバイスに対してのみスタイルシートを無効にすることを提案してくれたAndrewMansonに特に感謝します。