TOP

iphone横画面のスマートフォン対処

シリウスのレスポンシブサイトをiPhoneの横画面で閲覧するとなぜか、
パソコンサイトなので、横でもスマートフォン対応になりませんか?
という質問が寄せられました

 

 

android、iPhoneとも縦横とも閲覧できますね

 

でも、横画面にするとパソコンレイアウトで多少見ずらいかな...?

 

シリウスさんで調整されているデフォルト指定なので無難な指定値かと
理解しておりましたが....

 

ま、評価はともかく横画面でもレイアウトが自動調整される変更方法を
お答えします

 

スタイルシートを開いてください

 

スマートフォン用のメディアコードをご確認ください

 

以下
@media screen and (max-width: 640px) {

 

640pxの指示は、画面サイズが、640px以下でスマートフォン対応に変化する
とされているので、それ以上の画面サイズですとパソコン画面そのままで
表示されるので、数値を大きくして対処します

 

 

いくつもの同じ指定メディアコードが記載されているのが確認できますね
それらすべてのmax-width: 640px記載で数値を書き換えます

 

数値は768

 

書き換え後、保存を選択してアップロード以降、作用はご確認いただけます

 

 

768という数値は、あくまで目安としてください

 

ここで注意点
数値は698でも反映されますが、これがベストという数値は断言できないのです
当サイトは768で、別段問題なく表示されておりますが、指定数値は、
サイトによりけり各人バラバラ、

 

できれば、ご自身で納得していただくには、スマートフォンサイズのメディアコード
などのキーワードでお調べ決めてください

 

 

 

レスポンシブサイト専用のサポートまとめ
トップページ

関連ページ

テーブルランキングのレスポンシブ不具合エラー
テーブルランキングを導入以降、レスポンシブ作用後は、適合した比率で狭まらない、ある程度で作用が止まるという質問が寄せられました
ブログモードでサブ階層の更新履歴が表示されない
シリウスレスポンシブテンプレートのブログ仕様で3階層にした場合、2階層の関連ページが表示されない。対応策はこちらで....
サイト幅いっぱいの画像を記事カラムに設定したい?
レスポンシブの一カラムでLPを作っているが、サイト幅いっぱいの画像を記事カラムに設定できませんか?という質問です。ご返答はこちらで.....
サイドメニューを右配置にしたはずが、保存されない
右サイドメニューでテンプレートを選択したはずが、 CSS改行して保存すると元の左位置に戻ってしまう デフォルトに戻す、保存、いずれを指定しても結果は反映されない
H1テキスト、背景スペースともに非表示にしたい
h1 テキストおよび背景のスペースをPC,スマートフォンでも非表示したいが表示される部分の幅の調整(縮小)の方法がわかりません...という質問です...お答えはサポートで,,,
巻末の更新履歴をサイドバーに移動した際のCSS不指示について
シリウスレスポンシブサイト専用のサポート、何かしらの事情で当サイトにお寄せられた質問に対してのサポート対応
記事巻末と更新履歴とのスペースが狭まらない?
シリウス記事画面で巻末の隙間を排除しているのですが、閲覧では、更新履歴とのスペースが空きすぎる空間が見られるのですが狭めることはできないのでしょうか?詳細はこちらでご覧ください..
ヘッダー画像のみワイド化できませんか?との質問です
レスポンシブテンプレートのイチカラム対応でヘッダー画像のみワイド化、拡張できませんか?との質問が寄せられました
ヘッダー画像をページごとに個別表示設定はしたが反映されない?
シリウスレスポンシブTPで、ヘッダー画像をトップ、カテゴリー、エントリーとも個別に表示したい..解説サイトを例にするとコードのみが表示されてしまうのです。解決策をお願いします....