iPhoneで画面を横表示にすると固定ページだけ文字が大きくなる

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › iPhoneで画面を横表示にすると固定ページだけ文字が大きくなる

7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #32571
      e-farmer
      ゲスト

      いつもお世話になります。

      iPhone5cを使っています。縦にして自分のサイトを見ていて、横にすると、固定ページの本文だけ、文字が大きくなります。投稿ページの本文など他の文字は変わりません。

      固定ページの本文の文字サイズも変わらないようにしたいのですが、どの当たりを見ればよいのでしょうか?
      よろしく御願いします。

    • #32575
      Hidekichi
      ゲスト

      おそらく、これはiPhoneのブラウザが勝手に調整しているんだろうと思うんですが、多少変わるかも知れませんけど、remを使えばイケるかも知れません。

      remはhtmlのフォントサイズに対するn倍設定の相対値で指定する単位です。

      例えば

      html {
        // font-size: 16px; //何も指定していない場合はブラウザデフォルトの16pxだろうと思う
      }
      
      #site-title {
        font-size: 32px;
        font-size: 2rem;
      }

      こういう感じで指定します。
      pxは絶対値で、上記であれば32px分のサイズになるわけですが、このpxはもしかするとiPhoneあたりは画面サイズに対する何かしらの計算で出しているかも知れません。レテイナ云々の感じで。

      他にも相対値というと%やemなどがありますが、%は知りませんけどもemは確実に親要素のサイズを継承する場合があり、親のfont-sizeに依存するので実際のサイズがいくつになるかわかりにくい場合があります。
      しかし、remは、必ずhtmlからサイズを拾うので、htmlが16pxであれば、1remは16px、2remは32pxととてもわかりやすくなります。

      仮に、htmlで15pxを指定した場合、24pxが欲しければ、
      欲しいpx / ベースサイズ = (上記なら1.6rem)

      と言う計算になります。つまりは、ベースのフォントサイズで割ればよいわけです。

      sassやscssなら簡単に設定できます。

      @mixin fz($size: 16) {
          font-size: $size + px;
          font-size: ($size / 16)  + rem;
      }

      こう設定しておいて、

      #site-title {
        @include fz(24);
      }
      
      // ↑ こうすると、 ↓ こうなる
      
      #site-title {
        font-size: 24px;
        font-size: 1.5rem
      }

      内容的には、基本の値を16pxとした場合に、その16pxとremに値する1.5remを並べて出力するというものです。
      cssは後から書いた方が適用されますが、古いブラウザでremがわからない場合は無視されます。
      remがわかるブラウザ(最近のはたいていわかる)はremでpxを上書きして出力します。

      scssなどがローカルで使えない場合でも、並べて書いておけばよいだけなので、remの部分を計算機でサックリ計算して、cssに書けばよいだけです。
      こうすれば、多少はマシになるんじゃなかろうかと思います。

    • #32590
      e-farmer
      ゲスト

      Hidekichiさん 早速のアドバイスありがとうございます。

      なるほど、ブラウザの挙動の場合、そのような指定ができるのですね。
      ただ、今回は、投稿記事はOKで固定ページだけNGなので、何か簡単なことで解決できそうに思います。
      まずそちらを探ってみようと思います。

    • #32612
      アバター画像わいひら
      キーマスター

      iPhone5cの表示解像度は、320×568で合っているでしょうか?
      iOS – iPhone/iPad解像度(画面サイズ)早見表 – Qiita
      僕は、スマホの事に関してはあまり詳しくないもので、同じ解像度で、ブラウザやAndroidエミュレーターなどで動作確認してみたいと思います。
      ただ、iPhoneは持っておらず、動作確認はできないので、iPhone固有の問題であれば、対応できない可能性があります。

    • #32616
      e-farmer
      ゲスト

      わいひらさんありがとうございます。

      表示解像度は表の通り、論理ポイントで320×568、物理デバイス自体は 640×1136ですね。

      iPhone側が投稿記事と固定ページで何か区別しているということですので、stylesheetなどで.postと.pageで差があるところを探していますが、今の所わかりません。
      pc上でiPhoneの表示をシミュレーションしつつ、開発ツールが使えれば良いのですが..

    • #32617
      e-farmer
      ゲスト

      原因らしきものが判りました。

      ie11の開発者ツールにもエミュレーション機能がありました。これで見るとfontの指定で効いているところが違うようです。

      固定ページ:カスタマイザ-でモバイル本文文字サイズを16pxに指定
      投稿記事:子テーマのCSSで.articleを14pxに指定

      のようになっていました。
      子テーマのCSSの記述を削除し、15PXに統一しましたが、キャッシュの影響でiPhoneの画面はかわらず、確認はこれからです。

    • #32621
      Hidekichi
      ゲスト

      って事は、やはりfont-sizeをremにするのが手っ取り早い解決法ですな。
      カスタマイザーのフォントサイズがbodyかarticleかどこにかかっているのかはわかりませんけど、そこがいくつであっても、remなら間違いなく目的のサイズになります。

      各セレクタに個別にfont-sizeを設定する場合でも、基準となるフォントサイズのn倍と言う設定は便利ですよ。今、1カラムのデザインもできるようになりましたが、その時だってhtmlのサイズを変えるだけで全体的にフォントが大きくなるわけですし、その比率は変わらないということから、スマホの時はhtmlのフォントサイズを小さくすれば良いだけですし。

      フォントサイズだけで言えば、メディアクエリでhtmlのフォントサイズをイジるだけ。こんなお手軽な方法は他にはないと思います。
      cssの設定的にはnremなりますが、出力時にはpxでブラウザは認識(計算)しているので、デベロッパーツールのdom(chrome)や計算済み(firefox)では、pxで表示されます。これ何pxだっけ?というのも後から調べられるという寸法です。

    • #32627
      アバター画像わいひら
      キーマスター

      固定ページ:カスタマイザ-でモバイル本文文字サイズを16pxに指定
      投稿記事:子テーマのCSSで.articleを14pxに指定

      のようになっていました。
      子テーマのCSSの記述を削除し、15PXに統一しましたが、キャッシュの影響でiPhoneの画面はかわらず、確認はこれからです。

      これって、子テーマでのスタイル指定の仕方がおかしいだけではないでしょうか。
      もし優先されるスタイルがあったとしても、優先度の高いCSSセレクタを書けば良いだけですし。

      Simplicityデフォルトの状態をデベロッパーツールで見てみましたが、問題はないようです。
      当サイトでも同様の表示になるか試してみられましたか?

      独自のカスタマイズによる不具合の場合は最初の書き込み内容だけでは、僕には原因がわからないはずですし、何ともできないです。URLなどがあればある程度わかるかもしれませんが。

      通常、.articleのフォントサイズを変更する場合は、テーマカスタマイザーの「レイアウト(投稿・固定ページ)」の「本文文字サイズ」や「モバイル本文文字サイズ」の設定から行います。

7件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)