2

ここで初めて質問するので、私が正しい場所にいることを願っています。

以下は私が取り組んでいるサイトです (ビルドはしませんでした)。iPhone でテストするだけだと思っていましたが、「応答性」が適切に機能しないことがわかりました。

デスクトップでブラウザーのサイズを変更すると、正常に機能しますが、モバイル/タブレットでは完全なデスクトップ スタイルが読み込まれます。不思議なことに、横向きに回転して再度戻すと、正しいスタイルシートが再読み込みされます。

デスクトップ、タブレット、モバイルの 3 つのスタイル シートがあります。jquery の一部は、デバイスの幅に基づいてスタイル シートを切り替えるようです。

どんな助けでも大歓迎です！:)

http://weybridge-dental-care.co.uk/

ありがとうございました！

<!-- Resolution switcher -->
<script type='text/javascript' src='http://weybridge-dental-care.co.uk/wp-content/themes/weybridge/resolution-switcher.js'></script>

<!-- Disable viewport zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

そして、これはjsです：

function adjustStyle(width) {
width = parseInt(width);
if (width >= 1000) {
    $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-desktop.css");
} else if ((width >= 701) && (width <= 999)) {
    $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-tablet.css");
} else {
   $("#size-stylesheet").attr("href", "http://www.weybridge-dental-care.co.uk/wp-content/themes/weybridge/styles-mobile.css"); 
}
}

$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
    adjustStyle($(this).width());
});
});
4

1 に答える 1