2017年5月24日(水)
ブラウザの表示情報 #HTML5&CSS3&JavaScript ブラウザ情報(PHP, Javascript)には、解像度、表示幅、表示高さの情報は含まれていない。
Javascriptでは、解像度、表示幅、表示高さ、を知ることができる。
PHPで利用するには、一度Javascriptで知り得た情報を、formで送信して、再表示させる。
下記は、画像を適当なサイズで表示するプログラム。表示幅の情報のみ利用しているが、解像度の情報を利用して、低画質、高画質のファイルと分岐することもできる。（自動表示切替を分かりやすくするため３秒タイマーを働かせているが、タイマー無しでも問題ない。）
--
<?php
if( !isset($_POST["width"]) ){
echo'<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
function _onload(){
document.forms[0].ratio.value = window.devicePixelRatio;
document.forms[0].width.value = window.parent.screen.width;
document.forms[0].height.value = window.parent.screen.height;
document.forms[0].innerWidth.value = window.innerWidth;
document.forms[0].innerHeight.value = window.innerHeight;
$timer = window.setTimeout("_submit()",3000);
}
function _submit(){
document.forms[0].submit();
}
</script>
</head>
<body onload="_onload();">
<form action="'.$_SERVER["PHP_SELF"].'" method="post">
<p>window.devicePixelRatio:<br>
<input type="text" name="ratio"></p>
<p>window.parent.screen.width:<br>
<input type="text" name="width"><br>
window.parent.screen.height:<br>
<input type="text" name="height"></p>
<p>window.innerWidth:<br>
<input type="text" name="innerWidth"><br>
window.innerHeight:<br>
<input type="text" name="innerHeight"></p>
</form>
<p>※３秒後に、自動更新します。</p>
</body>
</html>';
}else{
$style1 = '';
$style2 = '';
if($_POST["width"]<480){
$style1 = ' style="width:'.$_POST["width"].'px;"';
$style2 = ' style="height:'.$_POST["width"].'px;"';
}
echo'<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>※デバイスに合わせて、画像の表示サイズを調整しています。</p>
<p><img src="480x320.jpg"'.$style1.'></p>
<p><img src="320x480.jpg"'.$style2.'></p>
</body>
</html>';
}
?>
--
P.S. 『子猫の手』では、この仕組みをまだ利用していない。同じファイルを繰り返し読み直すことで、検索サイトでどのように扱われるか、検証が進んでいないためである。
検証で問題無いことが明らかになれば、利用したいと考えている。『子猫の手』で作成したサーバ内のページを一回だけ読み込めば、情報をSESSION変数に組み込める。SESSION変数によって、サーバ内移動では、同じファイルを２回読み直す必要がなくなる。
http://neconote.jp/php/devicePixelRatio.php
お問い合わせ