2013年12月15日(日)
PC/iPhone&Android分岐 #■パソコン・通信 どうやって、パソコン用とスマホ用のホームページを切り替えているの？とご質問を頂きました。
まず、以前にも話しましたように、<head></head>内に、下記を記述して、スマホに対応させます。
<meta
name="viewport"
content="width=device-width">
これだけで、パソコンとスマホは、同じように見えるようになります。ガレコレのホームページ（『子猫の手』で作成）は、表示幅480pxに設定しています。パソコンでもスマホでも携帯電話でも、そこそこで見れるという設定です。
一歩進んで、各々に最適な設定を考えてみましょう。肝心なことは、スマホ用にはページ幅を指定せず、パソコン用にはページ幅を指定して中央揃えすることです。これで、スマホでは320px幅で表示され、パソコンでは指定幅で表示されます。
日本では、スマホとして、iPhoneとAndroidだけ識別すればいいでしょう。もっと正確に記述することもできます。
JavaScriptでも、PHPでも作れます。サーバにPHP環境があるならば、PHPの方をお勧めします。
【PHPの場合】
<?php
$ua
=
$_SERVER["HTTP_USER_AGENT"];
if(!stristr($ua,"iphone")&&!stristr($ua,"android")){
$style
=
'
<style>
<!--
#id_center
{
width:480px;
margin-right:auto;
margin-left:auto;
}
-->
</style>';
}else{
$style
=
'';
}
print('<!DOCTYPE
html>
<html
lang="ja">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width">'.$style.'
<title>タイトル</title>
</head>
<body><div
id="id_center">
<p> パソコンでは、この文章は、480pxの幅で、中央揃えで表示されます。</p>
<p> スマホでは、通常320pxの幅で表示されます。</p>
</div></body>
</html>');
?>
【JavaScriptの場合】
一旦、ページ全体を非表示にしておきます。スマホの場合はそのまま、パソコンの場合はページ幅を480pxにして中央揃えにしてから、ページ全体を表示します。
JavaScript、CSSに対応していない古い携帯電話ブラウザ（DoCoMo1.0）などで表示した場合は、JavaScriptとCSSは無視されますので、スマホ同様に適当なサイズで表示されます。
心配であれは、ページ全体を非表示にしている<style>～</style>を削除して下さい。ただし、JavaScriptを使うパソコンでは、一旦、幅広で表示してから、揺れて整うといった表示になります。
<!DOCTYPE
html>
<html
lang="ja">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width">
<style>
<!--
#id_center
{
display:none;
}
-->
</style>
<script>
<!--
function
_setup(){
$ua
=
window.navigator.userAgent;
$ua
=
$ua.toLowerCase();
$target
=
document.getElementById("id_center");
if($ua.indexOf("iphone")==-1&&$ua.indexOf("android")==-1){
$target.style.width
=
"480px";
$target.style.marginRight
=
"auto";
$target.style.marginLeft
=
"auto";
}
$target.style.display
=
"block";
}
window.onload
=
_setup;
//
-->
</script>
<title>タイトル</title>
</head>
<body><div
id="id_center">
<p> パソコンでは、この文章は、480pxの幅で、中央揃えで表示されます。</p>
<p> スマホでは、通常320pxの幅で表示されます。</p>
</div></body>
</html>
※下記のリンクは、JavaScript版です。最後の.htmlを.phpに変更するとPHP版で表示されます。同じ表示になります。
http://neconote.jp/sp/pc_sp.html
お問い合わせ