私のワードプレスで構築されたウェブショップにスライダーがあります。しかし、私はモバイルブラウザで必要以上に幅が広くなり、猫はそれを理解します。フォントを調整すると、再び正しい幅になります..
サイトは www.starstrucked.se にあります。
すべてのヒントに感謝します。
の幅は柔軟です。デスクトップの場合は 83% (883px) です。ブラウザーのサイズを変更すると、スライダーはインライン スタイルになります。
<div class="slider jquery-slider default" style="width: 883px; height: 361px;">
<div class="slide-wrapper" style="width: 883px; height: 361px;">
したがって、JavaScript がインライン スタイルを設定しているか、html にハードコードされている可能性があります。jquerySlider をレスポンシブに配置することは可能ですか?
http://wordpress.org/support/plugin/jquery-slider
補足: コンソールを確認してください:
ビューポート引数値「1.0;」キー「initial-scale」の場合、数値プレフィックスに切り捨てられました。ご了承ください ';' ビューポート値のセパレータではありません。リストはコンマで区切る必要があります。www.starstrucked.se:63 ビューポートの引数値「4.0;」キー「maximum-scale」の場合、数値プレフィックスに切り捨てられました。ご了承ください ';' ビューポート値のセパレータではありません。リストはコンマで区切る必要があります。
解決
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
スライダーの幅が固定されているため、モバイル ブラウザー (iPhone など) には幅が広すぎます。これをhead
ページの
<meta name="viewport" content="width=device-width">
別の方法は、bxSlider など、最近ではかなりの数の、より応答性の高いスライダー スクリプトを見つけることです。
編集: head
iPhone/iPad などでレイアウトをスケーリングするためのスクリプトが含まれているようですが、機能していません。とにかくCSSとメタ要素を使います。