|
<Number>: [0000052B]
<Date>: 2024/01/08 20:37:56
<Title>:
<Name>: amanojaku@管理人
|
|
|
「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。
Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。
(各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeの開発者ツール(デベロッパー・ツール)のモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。
Chromeの開発者ツール(デベロッパー・ツール)にはスマホをエミュレートできるモバイル・エミュレーターが搭載されており、このモバイル・エミュレーターは仮想的に解像度も変更できるようです(なお 「Galaxy、Pixel、iPhone、iPad」などの解像度のプリセットも用意されているようです)。
ただし、そのプリセットは解像度を再現するだけであり、(当然 本質はPC用ブラウザなので)「スマホでは余りCSSが効かないとか、バク的な仕様とか」などを再現するわけではないので注意して下さい。
モバイル・エミュレーターは、当然 モバイル(スマホ、タブレット)用のエミュレーターなので(metaタグの)viewport属性で固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewport属性で固定値が指定されている場合は、その設定をコメントにし、代わりに下記の(metaタグの)viewport属性を設定て下さい。
「<!-- 」、「 -->」で囲うとコメントにできます(例.「<!-- コメント -->」)。
そうしないとスマホ用(metaタグの)viewport属性の固定値が有効になってしまうのでPC用の表示をチェックできません。
(metaタグの)viewport属性の設定が存在しない場合は、(metaタグの)charset属性の設定の次あたりに それを記述して下さい。
<meta name="viewport" content="width=device-width">
なお 下記は、一般的にネットで推奨されているviewportの例ですが、「initial-scale=1」が指定されていると横幅が はみ出る場合が有るようですので、「initial-scale=1」を削除することをオススメします。
> <meta name="viewport" content="width=device-width,initial-scale=1">
モバイル・エミュレーターは あくまでもモバイル用ブラウザのエミュレーターです、PC用ブラウザとはビミョウに仕様が違います(モバイル用ブラウザはスクロールバーの幅はゼロになります)。
PC用として利用したい場合は、その仕様を理解して使って下さい。
つまり(PC用として利用したい場合は)モバイル・エミュレーターはザックリとしたイメージを確認する場合のみにして、本格的にチェックしたい場合は、PCでチェックしたい解像度用の複数のアカウントを作成すると良いでしょう(その場合、PCモニターは4k解像度が推奨される)。
4kモニターを購入する場合の注意点
http:../utf8/smt.cgi?r+twilight/&bid+00000041&tsn+00000258&bts+2021/03/26%2020%3A00%3A27&
【画面の解像度に関して】
PCモニターの場合、現在4k画面(横幅3840px)が普及価格帯で販売されており、「HD画面(横幅1280px)、FHD(Full-HD)画面(横幅1920px)、WQHD(Wide Quad-HD)画面(横幅2560px)」などもあります。
また高解像度モニターは(高価ですが)「5k画面(横幅5120px)、6k画面(横幅6016px)、8k画面(横幅7680px)」も販売されています(そのうち量産効果で安くなるか?)。
逆に低解像度モニターは1K画面(横幅1024px)や(2020年9月現在、価格.com調べ)800px画面(横幅800px)も有るようです。
参考:下記はテレビ画面のHD(ハイビジョン)以降の規格(解像度)です。
今どきの若い人はHD(ハイビジョン)など知らないかもしれませんが、「4k画面、8k画面」ぐらいは聞いたことは有るでしょう。
ただしPCモニターの解像度は、テレビ画面のような正式な規格と言う訳では無いですが。
https://images.app.goo.gl/ZQctd4Rb7AorGsNp6
レスポンシブ・デザインの場合は、とりあえずChromeモバイル・エミュレーターで一般的には約「300px~3000px」解像度ぐらいをチェックすれば良いでしょう(プロなら6k解像度モニターぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう)。
「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックできるようです(「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です)。
「スマホ、タブレット」の場合は、端末の物理的な解像度とブラウザ上の解像度は違うようで、ブラウザ上の解像度を「CSSピクセル、dp解像度」と言うらしいです。
iOS・Android端末のCSSピクセル・dp解像度一覧
https://wemo.tech/1496
【2022最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad..
https://webdesign-abc.com/tech/resolution-list/
今更「dp」について考える
https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes?hl=ja
【実質的な解像度に関する注意点】
Windowsでは表示を拡大するスケーリング機能が有ります。
Windowsの4Kスケーリング環境を検証する
https://pc.watch.impress.co.jp/docs/column/4kshugyousou/732083.html
>視力に基づく見えやすさによって変わってくるが、4Kの場合150%で2,560×1,440ドット相当、200%で1,980×1,020ドット相当になり、この辺りが目安かと思われる。ディスプレイサイズも踏まえるなら、27型なら150%、15.6型なら200%にしておけば、ほとんどの人が見やすい文字サイズになるだろう。
つまり、スケーリングを考慮すると、PCにおいては最低限「約1000px~約2500px」解像度の範囲は対応する必要が有ると言うことになります。
(ここは流して読んでおけば良いです)それとは別に当方もザックリとした試算をしてみる。
PCでは視距離はモニターの横サイズに比例すると考えるようです(テレビでは視距離は画面の縦サイズに比例すると考えるようですが)。
(当方の環境で算出)視距離とモニターの横サイズに比例する(便宜的な)「視距離率」は1.45とする。
1m先の仮想的なドットピッチを(便宜的に)仮想ドットピッチとする。
「15インチ・モニター(アスペクト比 3:4)、解像度 1024x768、横サイズ 約305mm、ドットピッチ 約0.29785mm」⇒「視距離 1.45*305=約442mm、仮想ドットピッチ 0.29785*1000/442=約0.674mm」。
27インチ・モニターはスケーリングを150%と想定する、スケーリングしたドットピッチを(便宜的に)スケーリング・ドットピッチとする。
「27インチ・モニター(アスペクト比 9:16)、解像度 3840x2160、横サイズ 約598mm、ドットピッチ 約0.15573mm」⇒「視距離 1.45*598=約867mm、スケーリング・ドットピッチ 0.15573*1.5=約0.2336mm、仮想ドットピッチ 0.2336*1000/867=約0.269mm」。
15インチ・モニターと比べ27インチ・モニターの仮想ドットピッチは約40%のサイズになる。
つまり、15インチ・モニター「解像度 1024x768」でチェックする場合、「1024px~2560px」をチェックすれば良いと言うことになる。
【実際の操作法】
レスポンシブ・デザインの場合は、とりあえず一般的には約「300px~3000px」解像度ぐらいをチェックすれば良いでしょう(プロなら6k解像度モニターぐらいは使ってるかもしれませんので、ポートフォリオを作成するなら約「280px~6000px」解像度ぐらいには対応すると良いでしょう)。
モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい、Windowsなら[F5]。
自分のモニター解像度・以上か未満かで、モバイル・エミュレーターの操作法が変わるので注意して下さい。
なので まずは自分のモニター解像度を把握して下さい。
漢字入力はOFFにして下さい。
Windowsなら[F12]で開発者ツール(デベロッパー・ツール)を起動できます(起動に少々時間が かかるかもしれません)。
デフォルトではブラウザの右側に開発者ツール(デベロッパー・ツール)が表示されます。
開発者ツール(デベロッパー・ツール)の右上のスリー・ドットをクリックすると、メニューの先頭に開発者ツール(デベロッパー・ツール)・ドックの位置が指定できます(3番目の画像の赤く囲われた所)、左から順番に「別ウインドウ、左側、下側、右側」(個人的には別ウインドウを推します)。
開発者ツール(デベロッパー・ツール)・ドックを別ウインドウにした場合、Windowsなら下のタスク・バーに、その(開発者ツール(デベロッパー・ツール)・ドック用の)タスク・アイコンが表示されるので、それをクリックすることで表示・非表示を簡単に切り替えられます。
開発者ツール(デベロッパー・ツール)の上部のモバイル・エミュレーター・アイコン(1番目の画像の赤く囲われた所)をクリック。
【PC画面のエミュレイトの場合】
自分のモニター解像度より解像度を小さくする場合は、説明が難しくなるので、(Chromeモバイル・エミュレーターでチェックする場合は)かえって1k解像度モニターのほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。
PCモニターにおいては大まかなイメージが確認できれば良いだけなので、解像度の値は多少 誤差があっても問題ありません、とりあえず「1k~3k」解像度 程度を目安にしてみて下さい。
自分のモニター解像度より解像度を大きくする場合は、少々コツが要ります。
まず 最初に2番目の画像の赤く囲われたズーム指定(パーセント指定)を一旦 100%に指定、"幅"(左)に自分が指定したい解像度を入力し[Enter]、ビュー・エリアの右下の縁をドラッグし、縦・横を画面幅いっぱいにして下さい(特にビュー・エリアの幅は必ず、画面幅いっぱいにして下さい)。
(自分のモニター解像度より解像度を大きくする場合は)大まかなイメージが確認できれば良いだけなので解像度の値は多少 誤差があっても問題ありません。
なお Chromeモバイル・エミュレーターはモバイル・ブラウザをエミュレートしているので、スクロールバーの幅はゼロになります(通常のスクロールバーは表示されない)。
もし 本格的にチェックしたい場合は4k解像度モニター(+グラボ?)を買って、そのデフォルト解像度を2k~2.5k解像度とした場合には、1k解像度のアカウントを作って「デフォルト解像度と1k解像度」をチェックしてやれば良いでしょう。
4kモニターを購入する場合の注意点
http:../utf8/smt.cgi?r+twilight/&bid+00000041&tsn+00000258&bts+2021/03/26%2020%3A00%3A27&
【モバイル画面のエミュレイトの場合】
モバイルの場合は2番目の画像の赤く囲われたズーム指定(パーセント指定)を とりあえず100%に設定してみて下さい(明らかにサイズ感が違う場合は変更して下さい)。
ブレイク・ポイントをチェックしたい場合は、ビュー・エリアの縁をドラッグし、ブレイク・ポイントあたりで正常にレイアウトが変化するかを注視して下さい。
ビュー・エリアの縁をドラッグする場合、縦画面の最小値は280pxまでで良いです。
「タブレット、スマホ」の解像度のプリセットは(2番目の画像の赤く囲われたプリセット指定の)[サイズ:レスポンシブ]コンボボックスで選択可能です。
プリセットの解像度でチェックする場合はビュー・エリアはマウスで動かさないで下さい。
【解像度の変更時の注意点】
モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい、Windowsなら[F5]。
単位に「em、ex、ch、rem、lh」を使っている場合、解像度を変更してフォントなどの表示サイズが合わなくなったら、見やすいサイズにブラウザでフォント・サイズを設定して下さい。
《重要》ただし「Chrome」の「最小フォント・サイズ」設定は、「HTML、CSS」の設定を無視して強制的にフォント・サイズを変更してしまうので、本当にユーザー・フレンドリーか どうかをチェックしたいなら、「最小フォント・サイズ」設定は最小にしておかなければなりません。
例えば単位に「vw」などを使っている場合に、モバイル・エミュレーターで解像度を小さくしてもフォントの表示サイズが小さくならない時は「最小フォント・サイズ」設定が最小に設定されてないと思われるので ご注意ください(つまり「最小フォント・サイズ」設定が最小に設定されてないと、正しい表示をチェックできない)。
通常の「フォント・サイズ」設定でフォント・サイズが大きくならない場合は、フォント・サイズがフォント系単位 以外で指定されていると思われます。
【全画面表示でのチェックに関する注意点】
もし モバイル・エミュレーターを全画面表示でチェックしたい場合には、Windowsなら[F11]で全画面表示のON/OFFが可能です、全画面表示で起動中の他のアプリを表示したい場合は[Alt]+[Tab]でタスクマネージャーが起動できます、[Alt]は放さずに[Tab]を複数回 押すことで表示したいアプリを選択できます。
蛇足ですが
(メディアクエリは除き)Web系においての静的Webページでは古いpxなどの絶対単位を使うピクセル・パーフェクトは無くなりました(ただし動的Webページでは動的に絶対単位で生成している場合が多い感じです、また基幹系においての静的Webページでも昔ながらの古いpxなどの絶対単位のピクセル・パーフェクトを使っているかもしれませんが)。
つまり、(Web系においての静的Webページでは)現在の所謂ピクセル・パーフェクトは、別物になったと言うことです、(完全な別物なので)それをピクセル・パーフェクトと呼んで良いのかと言う議論は有るでしょうが。
分かりやすく言うと、肉眼で見たイメージとしてのピクセル・パーフェクトなので、脳内で便宜的に「イメージ・パーフェクト(仮)」とでも読み替えれば良いでしょう。
なお 人がピクセル・パーフェクトと言った時に、古いpx単位のピクセル・パーフェクトを言っているのか、「イメージ・パーフェクト(仮)」を言って居るのか、文脈から判断する必要があります。
なお (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになります。
ユーザー・フレンドリー(所謂 リキッド・レイアウト)はレイアウトが想定の範囲内で崩れるように設計しなければならないので、初心者には難しいです。
所謂ピクセル・パーフェクト(イメージ・パーフェクト(仮))なら、px→vwの換算は単なる四則演算なので特に難しいことはありません(アマチュアの勉強用なら1pxぐらいズレても、全然 気にしなくて良いです)。
いずれにしろ、「@media:メディアクエリ」はプログラムで言うところの条件分岐になるので、初心者には少々 取っつきにくいかもしれません。
プロとアマチュアでは方向性が違います、もし プロを目指すならピクセル・パーフェクトを希求して下さい。
本当に自分の作りたいサイトを(勉強のために)実用的なWebページで作ってネットで公開してみると良いでしょう(本当に自分の作りたいサイトならモチベーションも上がるでしょうから)。
逆に言うと、自分が本気でネットで公開したいサイトでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。
自分が本当にネットで公開したいコンテンツが有るか、どうかも重要な要素になるでしょう。
無料レンタルWebサーバーは基本的に広告が入るので、広告がウザくない所を探して下さい。
いきなり難しいことから始めずに、初めは簡単なレイアウトから挑戦してみると良いでしょう。
|
|
|
<Number>: [0000052E]
<Date>: 2022/03/27 14:13:45
<Title>:
<Name>: amanojaku@管理人
|
|
|
下記コードは あくまでもユーザー・フレンドリー用なので、(プロなど)ピクセル・パーフェクトを希求する場合は不要です。
Webページ作成時に何度も解像度をチェックするとなると、ユーザー・フレンドリーの場合は、各解像度で複数のフォント・サイズを検証しなけらばならないので、ブラウザによるフォント・サイズの調整(複数のフォント・サイズを検証)も、かなり面倒になります。
下記にフォント・サイズ自動調整用の「CSS、JavaScript」を記載してあるので、それを使うと便利でしょう、あくまでもモバイル・エミュレーター用の(暫定的なテスト表示用)コードなので、本番用Webページではコメントにするなど無効にして下さい。
※Edgeでは正常に動作しないので、必ずChromeを使って下さい。
モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい。
フォント・サイズ自動調整用の「CSS、JavaScript」により、下記「チンチロリン」ようにセレクトボックスが表示されます。
チンチロリン
http://xd305417.html.xdomain.jp/responsive/dice000/dice000.htm
【CSS定義(styleタグ内)の先頭に挿入】
※charset定義用metaタグの次にstyleタグを記述。
html {font-size: var(--HTML_FontSize);}
:root {
/* 0.217 0.18 */
--HTML_SelectOption_MNumber: 1;
--HTML_SelectOption_FontSize: calc(1rem * var(--HTML_SelectOption_MNumber));
}
* {font-size: 1rem;}
select > option {font-size: var(--HTML_SelectOption_FontSize);}
【JavaScript】
※styleタグの次に下記のJavaScriptを記述。
※フォントの大きさを変更したい場合は「vnFontRatio = 6;」の値を変更して下さい。
<script>
fwHTMLRoot = document.documentElement;
vnScreenWidth = screen.width;
vnScreenHeight = screen.height;
fwHTMLRoot.style.setProperty('--ScreenWidth', vnScreenWidth+'px');
fwHTMLRoot.style.setProperty('--ScreenHeight', vnScreenHeight+'px');
console.log('vnScreenWidth:'+vnScreenWidth);
console.log('vnScreenHeight:'+vnScreenHeight);
oCSSViewport = document.getElementById('idCSSViewport');
console.log('get_device():'+get_device());
if('sp'==get_device()){
console.log("if('sp'==get_device())");
// oCSSViewport.setAttribute('content', 'width=480, user-scalable=yes');
}
vnDevicePixelRatio = window.devicePixelRatio;
console.log('vnDevicePixelRatio='+vnDevicePixelRatio);
vnDScreenWidth = vnScreenWidth*vnDevicePixelRatio;
vnDScreenHeight = vnScreenHeight*vnDevicePixelRatio;
fwHTMLRoot.style.setProperty('--DScreenWidth', vnDScreenWidth+'px');
fwHTMLRoot.style.setProperty('--DScreenHeight', vnDScreenHeight+'px');
console.log('vnDScreenWidth='+vnDScreenWidth);
console.log('vnDScreenHeight='+vnDScreenHeight);
fwHTMLHead = document.head;
voComputedStyle = window.getComputedStyle(fwHTMLHead, null);
vnWindow_InnerWidth = window.innerWidth;
vnWindow_InnerHeight = window.innerHeight;
vnWindow_InnerMinimum = Math.min(vnWindow_InnerWidth, vnWindow_InnerHeight);
vnWindow_InnerMaximum = Math.max(vnWindow_InnerWidth, vnWindow_InnerHeight);
fwHTMLRoot.style.setProperty('--Window_InnerWidth', vnWindow_InnerWidth+'px');
fwHTMLRoot.style.setProperty('--Window_InnerHeight', vnWindow_InnerHeight+'px');
fwHTMLRoot.style.setProperty('--Window_InnerMinimum', vnWindow_InnerMinimum+'px');
fwHTMLRoot.style.setProperty('--Window_InnerMaximum', vnWindow_InnerMaximum+'px');
console.log('vnWindow_InnerWidth:'+vnWindow_InnerWidth);
console.log('vnWindow_InnerHeight:'+vnWindow_InnerHeight);
vsDefaultFontSize = voComputedStyle.fontSize;
console.log('vsDefaultFontSize='+vsDefaultFontSize);
vnDefaultFontSize = parseFloat(vsDefaultFontSize);
console.log('vnDefaultFontSize='+vnDefaultFontSize);
// JavaScript - モバイル判定(スマホ・タブレット・PC)
// https://infoteck-life.com/a0368-js-mobile-judge/
function get_device() {
var ua = navigator.userAgent;
if (ua.match(/(iPhone|iPod|Android.*Mobile)/i)) {
return 'sp';
} else if (ua.match(/iPad|Android|Silk|Kindle/i)) {
return 'tab';
} else {
return 'pc';
}
}
vnHTMLRoot_ClientWidth = fwHTMLRoot.clientWidth;
vnHTMLRoot_ClientHeight = fwHTMLRoot.clientHeight;
console.log('vnHTMLRoot_ClientWidth:'+vnHTMLRoot_ClientWidth);
console.log('vnHTMLRoot_ClientHeight:'+vnHTMLRoot_ClientHeight);
vnWindow_ScrollbarWidth = vnWindow_InnerWidth-vnHTMLRoot_ClientWidth;
console.log('vnWindow_ScrollbarWidth:'+vnWindow_ScrollbarWidth);
fwHTMLRoot.style.setProperty('--Window_ScrollbarWidth', vnWindow_ScrollbarWidth+'px');
CSSValue_Window_ScrollbarWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_ScrollbarWidth');
console.log('CSSValue_Window_ScrollbarWidth:'+CSSValue_Window_ScrollbarWidth);
//
vnFontRatio = 1.55*(vnDefaultFontSize/5-1);
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio);
// ↑ブラウザのフォント設定でフォントを拡大させたい場合。
// ※当然、ブラウザのフォント設定が必要。
console.log('vnFontRatio='+vnFontRatio);
console.log('vnHTML_FontSize='+vnHTML_FontSize);
vnFontRatio = 6;
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio);
// ↑※テスト用(ブラウザのフォント設定の手間が無い)。
console.log('vnFontRatio='+vnFontRatio);
console.log('vnHTML_FontSize='+vnHTML_FontSize);
fwHTMLRoot.style.setProperty('--HTML_FontSize', vnHTML_FontSize+'px');
SetFontScale('1');
function SetFontScale(sFScale){
vnFontScale = Number(sFScale);
vnHTML_FontSize = Math.ceil(vnWindow_InnerMinimum/200*vnFontRatio*vnFontScale);
fwHTMLRoot.style.setProperty('--HTML_FontSize', vnHTML_FontSize+'px');
console.log('vnHTML_FontSize='+vnHTML_FontSize);
}
</script>
【bodyタグの次に挿入】
<br>
<form>
<select name='nmFontScaleSelect' style='' onchange='FSS=this.form.nmFontScaleSelect; SetFontScale(FSS.options[FSS.selectedIndex].value);'>
<option value='0.85'>Font:0.85倍</option>
<option value='1' selected>Font:1倍</option>
<option value='1.25'>Font:1.25倍</option>
<option value='1.65'>Font:1.65倍</option>
</select>
</form>
<script>
CSSValue_ScreenWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenWidth');
CSSValue_ScreenHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--ScreenHeight');
CSSValue_VDScreenWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--VDScreenWidth');
CSSValue_VDScreenHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--VDScreenHeight');
CSSValue_Window_InnerWidth = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_InnerWidth');
CSSValue_Window_InnerHeight = getComputedStyle(fwHTMLRoot).getPropertyValue('--Window_InnerHeight');
document.write(
"oCSSViewport.getAttribute('content'):"+oCSSViewport.getAttribute('content')+';<br>'+
'get_device():'+get_device()+';<br>'+
'CSSValue_ScreenWidth:'+CSSValue_ScreenWidth+';<br>'+
'CSSValue_VDScreenWidth:'+CSSValue_VDScreenWidth+';<br>'+
'CSSValue_Window_InnerWidth:'+CSSValue_Window_InnerWidth+';<br>'+
'<br>');
</script>
|
|
|