HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

php で 画面サイズを拾う

php 画面サイズを拾う場面は結構あるわけですが、でも php はサーバーサイドで動くプログラム。

そのため画面サイズは受け取れません。

そこでどうするか。一般的には、 javascript を使います。

画面サイズを受け取る方法

<script type="text/javascript">
var windowWidth = $(window).width();
var windowSm = 767;
if (windowWidth <= windowSm) {
//横幅640px以下のとき(つまりスマホ時)に行う処理を書く
}
</script>


なのですが、どこで処理するか、場所によっては $(window) が文法エラーで落ちてしまいます。

正確な画面サイズを受け取ってどうするかにもよりますが、たぶん大方の目的は、スマホからのアクセスならば、php コマンドを実行しないとかそういったことだと思うんですね。

であれば、考え方を画面サイズという正確な値ではなく、メディアは何?という聞き方でも、目的は達成できるわけです。

<script>
var ua = navigator.userAgent;
var wintype=0;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
wintype=1;
}else if(ua.indexOf('iPad') > 0 ){ // || ua.indexOf('Android') > 0){
wintype=1;
}else{
wintype=0;
}
if (wintype==1) {
//横幅640px以下のとき(つまりスマホ時)に行う処理を書く
}
</script>



ですが、

document.getElementById("field").innerHTML = "";

で、HTML内に php を書いても実行されません。

つまり、php は、実行させてしまわなければいけない。


そこで、こういった逃げ方をしてみました。

携帯、iphone などの場合、サイドバーを表示させない

<!-- sidebar widget -->
<span id="sidebarwidjet">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) :
dynamic_sidebar( 'sidebar-1' );
else: ?>
<?php
endif;
?>
</span>
<script>
var ua = navigator.userAgent;
var wintype=0;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
wintype=1;
}else if(ua.indexOf('iPad') > 0 ){ // || ua.indexOf('Android') > 0){
wintype=1;
}else{
wintype=0;
}
if (wintype==1) {
var src=document.getElementById("sidebarwidjet");
src.style.display='none';
}
</script>
<!--/sidebar widget -->


動かしておいて、表示させなければいいという考え方です。


php で 画面サイズを拾う方法のまとめ

Javascript であれば、画面サイズ、メディアを拾うことができ、あとは php を動かしておいて隠す。

php で何をさせるかによっても、隠すでは済まないケースもあるかと思います。

表示ならば、style.display で処理できますが、計算値を使うとなると結構厄介です。

javascript で 値を渡して php を起動し、計算結果を innerHTML で吐き出すなどの工夫が必要ですね。

JavaScript に eval のような php の実行関数のようなものがあれば楽なので、javascript のパターンを作っておくといいかもしれません。

javascriptからサーバーサイドのプログラムを起動して結果を受け取るのはさほど難しいことではありません。

スポンサーリンク

スポンサーリンク

カテゴリー