知恵袋　（前に戻る）
114

 ビューポート（Viewport）を設定することで、
ウェブページがスマートフォンやタブレットなどの
様々なデバイスで正しく表示されるようになる。
HTMLのheadタグ内に以下のmetaタグを追加(必ずhead内に！)
タグに直接cssを書くインライン方式の方がcssの優先順位が高くなる

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content属性の値を変更することで、ビューポートの設定を調整することができる
width=device-width：デバイスの幅に合わせてビューポートの幅を自動的に設定。
initial-scale=1.0：ページの初期表示時の拡大率を1倍に設定。
例えば、以下のように記述することで、ビューポートの幅を固定して、
初期表示時の拡大率を1.5倍に設定することができる。

<meta name="viewport" content="width=600, initial-scale=1.5">

その他の設定方法については、以下のように指定することができる。
height：ビューポートの高さを指定
minimum-scale：最小の拡大率を指定
maximum-scale：最大の拡大率を指定
user-scalable：ユーザーがページを拡大・縮小できるかどうかを指定
例えば、以下のように記述することで、
ビューポートの高さを固定し、
ユーザーが拡大・縮小できないように設定することができる。

<meta name="viewport" content="width=device-width, height=500, user-scalable=no">

スマホの表示幅をオーバーして表示される問題の解決
外部cssファイルの場合は<style>タグの内側のみ記述で、<style>タグは不要
ただし、ホームページビルダーでは<link rel>でリンクエラーが出る
<link rel="stylesheet" href="sample.css">

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=yes">
<style>
@charset "UTF-8";
/* アルファベット文字の折り返しを可能にする追記CSS、*印はユニバーサルセレクタです */
* {
word-break: break-all;
}

/* スマホからPCまで全てのデバイス幅に効くCSS */
table {
max-width:800px;
width:100% !important;
margin:0 auto;
}
img {
max-width:100% !important;
height:auto !important;
}
@media screen and (max-width: 767px) {
table {
max-width:650px;
}
}
</style>
</head>


こちらを使うと、画面幅によって使うCSSを分けることができ、上記の場合だと、
PCやタブレットなどはmax-width:800px;にして、
768px以下のスマホの時はmax-width:650px;になる。
!importantは優先順位を指定。

(以下の例）
カタログの「画面解像度または最高解像度」。注意・pixcelの数値とは違う
実際は1pxの中に2倍または3倍の解像度で描画しますということ。
（　）内が実際のピクセル値

各機種の画面解像度
AQUOS wish　=　720x1,520　(?x? px)
XPERIA ace Ⅲ　=　720x1496　(?x? px)
moto e7 = 720x1600　(?x? px)
arrows M3 = 720x1280　(?x? px)
iPhone 11 = 828x1792　(?x? px)
iPhone 12pro = 1170x2532　(390x844px)　3倍スーパーサンプリング
iPhone SE = 750x1334　(375x667px)　2倍スーパーサンプリング

1ピクセルの中に2倍または3倍の解像度で描画する技術は
「スーパーサンプリング」と呼ばれます。
スーパーサンプリングは、元の画像やグラフィックをより
高い解像度で描画するために使用される方法です。
この技術では、ピクセルごとに複数のサブピクセルを考慮し、
それらの値を組み合わせることでより滑らかな画像を生成します。
スーパーサンプリングは、グラフィックスや画像処理の
分野で広く使用されています。


注意・・・widthはtdで指定する。以下、その例。
<div align="center">
<table border="2" bordercolor="#cc9900">
<tbody>
<tr>
<td align="center" width="800" height="1111"><br>（通常、heightは記載しない）

（前に戻る）

chie2.html(tvm)
<EOF>


↑