iPad pro 12.9inch での表示



  • 今回質問したいのは、ipadでの表示についてです。

    PC・iPhone では問題ないのですが、iPad pro 12.9inch の場合だけ画面いっぱい(若干、端が切れる)になってしまい、少々見苦しいです。

    左右に少し(5%程度)余裕をもたせたいのですが、良い方法はないでしょうか?

    header.php を <meta name="viewport" content="width=device-width, initial-scale=0.7" />としたら、最初のうちはうまくいったのですが、気がついたら元に戻っていました。

    * 1カラム(760px, 960px)だとうまく表示されません。デフォルトだと左右に隙間ができてうまく表示されます。

    0_1584208034278_IMG_0229.PNG


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :


  • administrators

    @icecream さん

    こんにちは!JIN運営チームのりょうたです。
    この度はJINご利用いただき誠にありがとうございます。

    表題の件ですが、iPad pro 12.9inchの画面サイズは横1024px縦1366pxなのですがこちらの環境では正常に横幅など余裕を持って表示することができています。
    画像だけでは状況の判断ができ兼ねますのでまずは、

    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :

    上記を埋めていただき状況のご共有をお願いできますでしょうか?
    お手数お掛け致しますが、宜しくお願い致します。



  • りょうたさん返信ありがとうございます。

    やはり、タブレットだと画面いっぱい表示されてしまい圧迫感を感じます。
    タイトルも調節しないと画面からはみ出てしまいます。
    (* キャッシュを消しても同じでした)
    PCではどちらも問題ないです。

    記事のURLは
    https://eigo-banchou.com/2020/03/01/第2講-不定詞の用法/
    をご覧ください。

    iPad pro 12.9 inch だとサンプル記事が画面いっぱいに出てしまい、かなり見づらいです。
    2カラムにすると問題が解決するようです。

    1カラムでも余裕を持って表示するにはどうしたら良いでしょうか?

    WordPressのバージョン :5.3.2
    ご利用のサーバー名 :Xサーバー
    PHPのバージョン :7.2.27
    OS : macOS Mojave バージョン10.14.6
    ご利用のブラウザ :Safari
    該当サイトのURL :


  • administrators

    @icecream さん

    こんにちは!りょうたです。
    ご共有ありがとうございます。おそらく記事のデザインの設定が問題かと思います。

    WordPressの管理画面より「外観」→「カスタマイズ」→「サイトデザイン設定」まで飛んでいただくと「記事エリアのデザインの選択」という項目が見つかるかと思います。

    ここのスタイルを「スタイル2」にしていただけますと周りに枠線が出てきますが、一応そのような問題がなくなるかと思います。
    どうしてもこのスタイルのままで余白を直したい場合は、

    @media (min-width: 768px) {
    	.article_style2 .cps-post-box {
                 padding-left: 10px;
                 margin: 0 20px;
    	}
    }
    

    これを追加CSSに追加していただき問題が解消するかと思います。
    お手数ではございますが、宜しくお願い致します。



  • りょうたさん

    「外観」→「カスタマイズ」→「サイトデザイン設定」でスタイル1にすると隙間が空くのですが、枠線が出てきます。

    この枠線が少し気になったので、css を実行してみました。

    バッチリです!

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

    本当に助かりました!

    感謝感激です。


 

});