PC用のPHPファイルをスマホ対応させる方法

さて今回は、私が突き当たった「PC用のPHPファイルをスマホ対応させる」という問題をどうやって解決したかを書きたいと思います。

今回どういう問題だったかをまず説明すると、あるPHPファイルの「画像を登録して表示させる」というプログラムをPC用の画面とスマートフォン画面、タブレット画面で列と行に表示される数を変えたいという問題でした。

列と行に表示される数を変えるにはPHPファイルの中のCSSを変えなければ修正できない状態でした。

私は最初、各端末で読み込むPHPファイルを変えればと思いましたが、インターネット上で参考文献を探してもなかなか見つからず難航していました。

そこで気づいたのが、PHPファイルの中のCSSに「minwidth」、「maxwidth」を設定して一つPHPファイルの中で、各端末の大きさに合わせた、CSSを分けて書く事で、対応できるんじゃないかと思いました。

実際にどうしたかというと、<style type=”text/css”>の下に@media screen and (min-width: XXXpx)｛と書き、その中に必要なcssを書いて、｝で閉じ、次に@media screen and (min-width: XXXpx) and (max-width:XXXpx) {　　}閉じと必要なサイズの分だけ書くという方法です。

例

<style type=”text/css”>

@media screen and (min-width: 737px) {

********************

********************

}

<style type=”text/css”>

@media screen and (min-width: 436px) and (max-width:736px) {

********************

********************

}

<style type=”text/css”>

@media screen and (min-width: 0px) and (max-width:435px) {

********************

********************

}

という感じで設定することで、PC用のPHPファイルをスマホ対応させるということに成功しました。

もちろんこの方法が通じないPHPファイルもあるかと思うし、他にもやりようがあるかと思いますが、もし同じ事でお困りの方がいたら試してみてください。

Follow me!