ガレコレ [Garage Collection]
2017年7月21日(金)
公開ページの表示幅について #■子猫の手
 現バージョン(2.6)の『子猫の手』で作成する公開ページの表示幅は、[スマホ(100%)][480px][640px]の3種類があります。

 スマホとパソコンを『ユーザエージェント』で自動判別して、スマホならば[スマホ]、パソコン(その他)ならば[480px]で、まず表示します。

 表示幅は手動で切り替えれますが、不要と判断しました。そして、[640px]はA4縦の印刷を想定していますが、あまり利用されておらず、幅広で少し読みにくいとのご指摘も頂いたので、削除します。

 『子猫の手 バージョン3』では、デバイスの表示幅、表示高などを検知する機能を付加します。デバイス本体が縦長の場合は[スマホ]、横長の場合は[パソコン]と判断します。ちなみにタブレットは、縦長タイプが[スマホ]、横長タイプが[パソコン]となります。

--参考
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices

http://screensiz.es/
--

 つまり、自動判別のみで、表示幅はスマホ用とパソコン用の2種類とします。


 なお、画像の表示サイズを的確にする機能も付加します。デバイスの表示幅を検知できると、色々なことに応用が利きますね。


 また、iPhone(Safari)では、スマホの画面を横向きにした場合、文字が拡大していました。文字が拡大されないようにします。

--
<style>

body {
  -webkit-text-size-adjust:100%;
}

</style>
--

 試用版を作成しました。微調整も完了しました。ただし、高解像度のスマホやタブレットでの確認が残っています。

 ブログの『日付』が一行に収まっていないことが原因で、表示幅に狂いが生じていました。とりあえず、日付が長い場合、~で段替えして、きちんと表示幅100%で表示できるようにしています。

 バージョン3では、曜日の括弧を全角から半角に変更して、表示幅に収めます。余談ですが、曜日の括弧は、昔は半角にしてましたが、表示フォントによっては下にずれて格好が悪いとのことで、全角にした経緯があります。やっぱり半角に戻します。

--
(土)
 ↓
(土)
-- ガレコレのHPでは、先行して変更しました。--

 なお、最上段に[デバイス][表示幅][表示高][ピクセル比]を、ブログの日付の上に[日付の文字数]を確認用に表示していますが、無視して下さいね。

 ↓
http://neconote.jp/index2.php
 
お問い合わせ


by Network Communication Note