iPad Pro 12.9インチのSafariで、右端が切れます

Simplicityの特徴 フォーラム 不具合報告 iPad Pro 12.9インチのSafariで、右端が切れます

このトピックには12件の返信が含まれ、2人の参加者がいます。2 年、 4 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #48405 返信

    部長ナビ

    いつもたいへんお世話になっております。部長ナビのページを主催しております部長ナビです。
    部長ナビのページ
    表題の通り、iPad Pro 12.9インチを購入し、横置き(Smart Keyboard使用)で自分のブログをSafariで表示すると、右端が切れます(2センチほど)

    Simplicity公式ページ、寝ログを見て見たところ、「タブレット表示」となっているため、このような現象は起きておりませんでした。当ブログはタブレットでもPCと同じ表示をしているため、右端が切れるのかなと思っております。

    iPad Pro 12.9インチでの表示はそれほど数が多くはないと思いますので、「気にせずそのまま行きましょう」となればその通り行きますが、もし、何か解決方法があれば教えていただければ幸いです。宜しくお願い致します
    (なお、Chromeではなぜか左右いっぱいに表示されました)

  • #48407 返信

    Hidekichi

    仕様を見てみました。
    2,732 x 2,048ピクセル解像度、264ppi

    とありますがレティナなので1/2とすると、1366 x 1024だと思うんです。
    Simplicityではviewportを「タブレットでもPCと同じ表示」にした場合、1280pxで設定しているので、12.9インチ(対角)を利用できるいわゆる横向きで見れば余裕で入るviewportのサイズなんですけどね。
    いわゆる縦向きなら1024pxしか幅がないわけですから切れますけども。

    理由的にはこういうことなので、方法的には1024px付近まではサイドバーをPC同様に表示させればよいわけです。で、かつviewportはdevice-widthにすれば良いのですが、アプローチの仕方は他にもあります。

    768pxはほぼ#main(740px)なのでアレですが、960px〜ならサイドバーは入れてかつ、#mainの幅(あるいはスペース)を若干狭めることで対応できます。
    現状Simplicityのメディアクエリがどこにどのように効いていて960以上の時にどのようなスタイルかにも依りますが、デバイスの幅がいくつであるかをjQueryで調べて、何かしら任意の値の時にbodyに例えば.ipadproというクラスを入れ、.ipadproがある場合はsidebarを表示するなどという対応をすればいけますし、ユーザーエージェントがわかれば、それの時にだけ.ipadproを入れることもできます。

    アプローチの方法は色々ありますが、カスタマイズの状況と既存のレスポンシブ対応のメディアクエリの兼ね合いにも依るということを前提に修正することができるか否かということならできると言えると思います。

    ただ現物と環境がうちにはないので、試し試しでしかお答えできませんけれども。

  • #48430 返信
    わいひら
    わいひら
    キーマスター

    現在、テーマカスタマイザーの「レイアウト(モバイル)」項目の「タブレットはモバイル表示」機能が無効になっていますよね?
    これを仮に有効にした場合、同じ現象はおきますでしょうか?
    (ヘッダーが横幅いっぱいになりますでしょうか)

  • #48441 返信

    部長ナビ

    返信ありがとうございます。
    iPad Pro 12.9インチを横置きにすると、PC表示で右端が切れる件

    こちらの記事でスクショを貼っておきました
    わいひらさんに言われたとおり、タブレットはモバイル表示にチェックを入れると普通に横幅一杯に表示されます。当ブログの読者の方のブログ(Simplicity)でも、同様に右端が切れることを確認しました

    Chromeだと切れないので、Chromeを使えば解決はします。ただ、もし、Safariで解決方法があるのであれば(しかも、僕ができる感じで・・・)ご教授いただければ幸いです

    ブログは色々いじってますが、基本他の方に教わってのカスタマイズなので、僕自身はあまりわかってません。申し訳ありません。アドバイスを元に、やれるだけやってみたいと思っております。よろしくお願いします

  • #48442 返信

    Hidekichi

    参考: [iOS10] Safari10.0 でviewportの挙動が変わったので検証してみた

    まぁ昔からsafariはバグしか無いと言われアップル製ieと揶揄されるぐらいですからしょうがないと言えばそうですが、viewportをdevice-widthにするのが吉でしょうね。つまりは完全レスポンシブですね。
    これでダメならjQueryで計算させたサイズをviewoprtに上書きするしか無いかも知れません。前レスにも書いたように完全レスポンシブになったからといってサイドバーが出せないということはないはずです。
    PCと同一内容のままシームレスにリサイズしていけるわけですから、サイドバーはcssで操作しているはず…。

    もしかするとis_mobileで消しているかも知れませんが。たぶんそれはないと思いたい。

    と、いいつつあんまり自信はないんですけどね。

    完全レスポンシブにすると色々問題が出る場合があります。mobile.cssが使えないというのが大きなポイントですがstyle.cssに書けば大丈夫なので本来のcssがかければそれほど問題ではありません。

    アドセンスにメディアクエリを使う必要が出てくるというのもそうかもしれません(google謹製のやり方があります)。が完全レスポンシブでも大きく問題となる場面は少ないです。safariのためだけにそうする必要があるかどうかは天秤にかける必要があります。

  • #48456 返信
    わいひら
    わいひら
    キーマスター

    header-css-mobile-responsive.phpテンプレートの
    <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
    を以下に書き換えるとどのようになりますか?
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

  • #48474 返信

    部長ナビ

    Hidekichi様、わいひら様、返信ありがとうございます

    【わいひら様】
    header-css-mobile-responsive.phpを指定のとおり変更しても変わりはありませんでした。

    しかし、header.phpの17行目が同じ表示だったので、ここを、試しに指定されたコードに変えてみたところ、iPad Pro 12.9インチのSafari表示で、横幅一杯にヘッダー部が表示されました(直りました)

    一応、スクリーンショットは該当記事に掲載しておりますが、コレで解決と言うことでよろしいでしょうか?

    【追記】iPad Pro 12.9インチ横置きでSafariで見ると右端が切れてしまう件が解決か?

  • #48475 返信

    部長ナビ

    連投すいません

    【わいひら様】

    試しにiPad Pro 9.7インチで表示させてみたところ、上の返信にあるリンク記事の最後に貼っておきましたが、9.7インチでなんか表示がおかしくなりましたので、コードは元に戻しておきました(何もいじってない状態に戻しました)

    9.7インチの方がユーザーが多いはずなので、12.9インチは表示がちゃんとなるChromeで行こうかと思っております。せっかく教えていただいたのに申し訳ありません。

  • #48505 返信
    わいひら
    わいひら
    キーマスター

    header-css-mobile-responsive.phpは、今や不要になったファイルでした。header.phpの編集であっています。ファイルが紛らわしいので、次のバージョンでheader-css-mobile-responsive.phpは削除しておこうと思います。

    #48475
    おそらくカスタマイズで挿入してあるtable.table-02の要素に幅が設定してあり、9.7インチのものでは横幅がはみ出すからではないかと思います。

    table.table-02 {
        background: #444444 none repeat scroll 0 0;
        border: 1px solid #ffffff;
        border-collapse: collapse;
        border-spacing: 0;
        width: 770px;←これ
    }

    このテーブルをレスポンシブ表示するようなCSSを書けば多分idth=device-widthでいけるのではないかと思います。

  • #48550 返信

    部長ナビ

    %表示に変えてみましたが、その下の「主要カテゴリ最新記事一覧」も横幅がpxで指定されているため、ここでダメになり、それもいじってみましたが、ちょっとコード作業は慣れておらず、非常に時間がかかるため、作業する時間がどうしてもとれないので、諦めました

    せっかく教えていただいたところ申し訳ありませんが、iPad Pro 12.9インチに関しては、今まで通り右端が切れる状態ですが、Chromeで行きます。わいひら様、hidekichi様、大変ありがとうございました

  • #48560 返信
    わいひら
    わいひら
    キーマスター

    あでも、次のバージョンで以下のコードは不要かと思い
    <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
    以下のように変更するので、
    https://github.com/yhira/simplicity2/commit/eb1d95d9cd425d631345bc5cd47b705262b90e15
    いずれにせよ次のバージョンで対応が必要になるかと思います。

  • #48561 返信

    部長ナビ

    了解です。今月は年末以外は明日しかコードいじれる時間がないので、なんとか明日、時間作って頑張ってみたいと思います。

  • #48563 返信
    わいひら
    わいひら
    キーマスター

    もし、うまくいかない場合は、不具合状態になっているページのURLを貼り付けていただければ、デベロッパーツールで見て改善コードを書いてお手伝いはできるかと思います(よほど難しい状態でない限りは)。
    書き込まれて、すぐには見ることはできないかもしれませんが、多分1日以内には。

返信先: iPad Pro 12.9インチのSafariで、右端が切れます
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)