スマホのテーブル文字サイズ

PR 2015/9/21

このトピックには6件の返信、2人の参加者があり、最後にわいひらにより11年、 1ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2015年9月20日 6:02 PM #32730
  
  肩痛
  ゲスト
  
  ＰＣで見ると本文の文字サイズとテーブル内の文字サイズは同じ(16px)ですが
  スマホで見るとテーブル文字が本文に比べ小さくなります
  
  どこを弄ればよいのでしょうか
  ご教示ください
- 2015年9月20日 9:59 PM #32739
  わいひら
  キーマスター
  こんな感じで、フォントサイズを変更すれば戻せるかと思います。
```
div.article th,
div.article td {
    font-size: XXpx;
}
```
  CSSを変更すべき場所を探す場合は、デベロッパーツールなどを使って探してみてください。
  WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
- 2015年9月20日 11:02 PM #32741
  
  肩痛
  ゲスト
  
  ＰＣでは同じ文字サイズが
  スマホで見るとテーブル文字だけ小さくなります
  ※Simplicityはデフォルトのまま
  
  CSSにテーブルの文字サイズ（「基本設定」と同じ16px）を記述しても
  文字が少し大きくなるが、同じサイズになりません
  
  スマホでもテーブル内の文字サイズをＰＣ同様
  同じサイズで表示させたいのですが
- 2015年9月21日 7:47 AM #32748
  Hidekichi
  ゲスト
  narrow.cssでfont-size:が85%とかになっているからだろうと思います。
  narrow.cssなので、子テーマmobile.cssに、
```
@media screen and (max-width: 440px){
  .article th, .article td {
    font-size: 16px;
    font-size: 1rem;
  }
}
```
  などと書いておけば、htmlのフォントサイズが16pxなら必ず16pxで表示されるかと思います。htmlが15pxで設定してあるなら、1.066666667rem(16px / 15px = 1.066666667)で間違いなく16pxになります。
  htmlが14pxなら、1.142857143remと、htmlのフォントサイズ基準で設定できます。
  
  htmlにフォントサイズが設定されていない場合は、デフォルトの16pxが適用されます。なので、上記のcssの16px、1remは、htmlが16pxの時、等価になります。
  逆に、htmlが14pxで設定してある場合、上記cssは、
  
  font-size:16px;
  font-size:14px;となり、cssは後から書いた方が上書きしますので、14pxで表示されることになります。ここらは注意が必要です。
  
  この書き方をするメリットとしては、htmlのフォントサイズを変更するだけで全体が同じ比率で拡大縮小できるという点にあります。
- 2015年9月21日 4:19 PM #32754
  わいひら
  キーマスター
  #32739には、narrow.cssよりも優先度の高いCSSを書いたので、僕の環境では普通に正常動作しているのですが。
  それでも、うまくいかなかったのであれば、書き込まれた情報だけでは原因がわからないので、子テーマにカスタマイズコードを記述した状態にして、テーブルがあるページのURLを掲載してください。
  
  確認時ブラウザキャッシュ等は削除されておられますよね？
  削除方法
  動作不良時のガイドライン
  Attachments:
  2015-09-21_16h19_05.png
- 2015年9月21日 7:36 PM #32762
  
  肩痛
  ゲスト
  
  #32739のとおりには書いていません
  「narrow.css」が優先してスマホはテーブル文字サイズが85%になるのですね
  
  「narrow.css」がどこにあるのか？すらわかりませんでしたが
  FTPソフトでようやく見つけました
  
  ありがとうございました
- 2015年9月21日 7:55 PM #32764
  
  わいひら
  キーマスター
  
  #32739のとおりには書いていません
  
  そもそも、そのままやらないのでは意味がありません。
  Simplicityでは子テーマでのカスタマイズを推奨しているので、#32739のように書きました。
  
  親テーマを編集しているのなら、そのように今度から書いてください。
投稿者

投稿