HTMLでのviewpointの使い方
viewport構文の紹介:
width widthはウェブページのレイアウトlayout幅を表し、viewportのサイズを制御し、指定できる値(デフォルト単位px)または特殊な値、例えばwidth=960、initial-scale=0.33(960はページlayoutの幅であり、ここでwidthは他のものを約1/3に縮小することを意味し、320ピクセルの携帯電話装置でウェブページ全体を見ることができる)
またはwidth=device-width(デバイスの幅、共通の書き方)
heightとwidthは同じ使い方で、高さを指定します.
target-densitydpi 1画面の画素密度は、画面解像度によって決定され、通常、1インチあたりの数(dpi)として定義される.Androidは、低ピクセル密度、中ピクセル密度、高ピクセル密度の3つのスクリーンピクセル密度をサポートします.低画素密度のスクリーンは1インチあたりの画素点が少なく、高画素密度のスクリーンは1インチあたりの画素点が多い.Android BrowserとWebViewのデフォルト画面は中画素密度です.
次はtarget-densitydpiプロパティの値範囲です.
デバイス-dpi–デバイスの元のdpiをターゲットdpとして使用します.既定のスケールは発生しません.high-dpi–ターゲットdpiとしてhdpiを使用します.中画素密度および低画素密度デバイスは、それに応じて縮小される.medium-dpi–ターゲットdpiとしてmdpiを使用します.高画素密度装置はそれに応じて増幅され、画素密度装置はそれに応じて縮小される.これはデフォルトのtarget densityです.low−dpi−ターゲットdpiとしてmdpiを用いる.中程度のピクセル密度と高ピクセル密度のデバイスは、それに応じて増幅されます.–具体的なdpi値をtarget dpiとして指定する.この値の範囲は70～400でなければなりません.
Android BrowserとWebViewが異なる画面のピクセル密度に基づいてページをスケールしないようにするには、viewportのtarget-densitydpiをdevice-dpiに設定します.そうすると、ページはスケールされません.逆に、ページは現在の画面のピクセル密度に基づいて表示されます.この場合、viewportのwidthをデバイスのwidthと一致するように定義する必要があります.これにより、ページが画面に適応できます.
initial-scale初期スケール.つまり、ページが開いたときの初期スケールの度合いです.これは浮動小数点値で、ページサイズの乗数です.たとえば、初期スケールを1.0に設定すると、Webページはtarget density解像度の1:1で表示されます.「2.0」に設定すると、このページは2倍に拡大されます.
maximum-scale最大スケール.つまり、最大スケールが許可されます.これも浮動小数点値で、ページサイズが画面サイズに比べて最大乗数であることを示します.たとえば、この値を「2.0」に設定すると、このページはtarget sizeに比べて最大2倍に拡大できます.
minimum-scale
最小スケール、maximum-scaleと同じ使い方
user-scalableユーザーはスケールを調整します.すなわち、ユーザがページのスケールを変更できるかどうか.yesに設定すると、ユーザーが変更できるようにします.逆にnoです.デフォルトはyesです.これをnoに設定すると、minimum-scaleとmaximum-scaleはスケールできないため無視されます.
注:すべてのスケール値は0.01～10の範囲でなければなりません.
metaラベルのその他の一般的な属性の使い方の解析を添付します.
1、
携帯電話で閲覧する場合、このラベルは、Webコンテンツの携帯電話番号をダイヤルアップのハイパーリンクとして表示するかどうかを指定するために使用されます.iPhoneのデフォルトは次のとおりです.
Webページの電話番号をダイヤルアップのハイパーリンクとして自動的に表示したくない場合は、次のように書くことができます.
2.の用途
このapple-mobile-web-app-capableの役割は、デフォルトのアップルのツールバーとメニューバーを削除することです.contentには2つの値「yes」と「no」があり、ツールバーとメニューバーを表示する必要がある場合は、この行metaを追加する必要はありません.デフォルトは表示です.
3.
default:デフォルト;black:純黒;black-translucent:半透明グレー
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>width widthはウェブページのレイアウトlayout幅を表し、viewportのサイズを制御し、指定できる値(デフォルト単位px)または特殊な値、例えばwidth=960、initial-scale=0.33(960はページlayoutの幅であり、ここでwidthは他のものを約1/3に縮小することを意味し、320ピクセルの携帯電話装置でウェブページ全体を見ることができる)
またはwidth=device-width(デバイスの幅、共通の書き方)
heightとwidthは同じ使い方で、高さを指定します.
target-densitydpi 1画面の画素密度は、画面解像度によって決定され、通常、1インチあたりの数(dpi)として定義される.Androidは、低ピクセル密度、中ピクセル密度、高ピクセル密度の3つのスクリーンピクセル密度をサポートします.低画素密度のスクリーンは1インチあたりの画素点が少なく、高画素密度のスクリーンは1インチあたりの画素点が多い.Android BrowserとWebViewのデフォルト画面は中画素密度です.
次はtarget-densitydpiプロパティの値範囲です.
デバイス-dpi–デバイスの元のdpiをターゲットdpとして使用します.既定のスケールは発生しません.high-dpi–ターゲットdpiとしてhdpiを使用します.中画素密度および低画素密度デバイスは、それに応じて縮小される.medium-dpi–ターゲットdpiとしてmdpiを使用します.高画素密度装置はそれに応じて増幅され、画素密度装置はそれに応じて縮小される.これはデフォルトのtarget densityです.low−dpi−ターゲットdpiとしてmdpiを用いる.中程度のピクセル密度と高ピクセル密度のデバイスは、それに応じて増幅されます.–具体的なdpi値をtarget dpiとして指定する.この値の範囲は70～400でなければなりません.
1
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />Android BrowserとWebViewが異なる画面のピクセル密度に基づいてページをスケールしないようにするには、viewportのtarget-densitydpiをdevice-dpiに設定します.そうすると、ページはスケールされません.逆に、ページは現在の画面のピクセル密度に基づいて表示されます.この場合、viewportのwidthをデバイスのwidthと一致するように定義する必要があります.これにより、ページが画面に適応できます.
initial-scale初期スケール.つまり、ページが開いたときの初期スケールの度合いです.これは浮動小数点値で、ページサイズの乗数です.たとえば、初期スケールを1.0に設定すると、Webページはtarget density解像度の1:1で表示されます.「2.0」に設定すると、このページは2倍に拡大されます.
maximum-scale最大スケール.つまり、最大スケールが許可されます.これも浮動小数点値で、ページサイズが画面サイズに比べて最大乗数であることを示します.たとえば、この値を「2.0」に設定すると、このページはtarget sizeに比べて最大2倍に拡大できます.
minimum-scale
最小スケール、maximum-scaleと同じ使い方
user-scalableユーザーはスケールを調整します.すなわち、ユーザがページのスケールを変更できるかどうか.yesに設定すると、ユーザーが変更できるようにします.逆にnoです.デフォルトはyesです.これをnoに設定すると、minimum-scaleとmaximum-scaleはスケールできないため無視されます.
注:すべてのスケール値は0.01～10の範囲でなければなりません.
metaラベルのその他の一般的な属性の使い方の解析を添付します.
1、
携帯電話で閲覧する場合、このラベルは、Webコンテンツの携帯電話番号をダイヤルアップのハイパーリンクとして表示するかどうかを指定するために使用されます.iPhoneのデフォルトは次のとおりです.
<meta name="format-detection" content="telephone=yes"/>Webページの電話番号をダイヤルアップのハイパーリンクとして自動的に表示したくない場合は、次のように書くことができます.
<meta name="format-detection" content="telephone=no"/>2.の用途
<meta name=”apple-mobile-web-app-capable” content=”yes” />このapple-mobile-web-app-capableの役割は、デフォルトのアップルのツールバーとメニューバーを削除することです.contentには2つの値「yes」と「no」があり、ツールバーとメニューバーを表示する必要がある場合は、この行metaを追加する必要はありません.デフォルトは表示です.
3.
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />default:デフォルト;black:純黒;black-translucent:半透明グレー