質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

javascriptとphpで画面サイズを取得し、htmlをechoする

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 7,820

mosin_nozomi

score 29

Webデザイン初心者です。

現在、レスポンシブデザインにするため、画面サイズをJavaScriptで取得し、それをPHPに渡し、if文でHTMLをechoするか否かを決める、というプログラムを実装したいのですが、なかなかうまくいきません。
以下のサイトを参考にしました。

http://muumv.com/section-windowsize/

ソースコード

(index.htmlに記述)
 <script type="text/javascript">            
                (function ($) {
                    $(function () {

                        //if ($(window).width() >= 650) {
                          //  $(".menu_button").css("display", "none");
                        //}
                         var setWindowSize = function () {
                            $.ajax({
                                type: 'POST',
                                url: './index.php', // 画面サイズを渡すPHPのURL
                                dataType: 'html' ,
                                data: {
                                    'windowSize': $(window).width()
                                }
                                //data: 'windowSize=' + (window).width()
                            });
                         };setWindowSize();

                        // リサイズした時にsessionを更新する為
                         var timer;
                         $(window).resize(function() {
                          if (timer) clearTimeout(timer);
                          timer = setTimeout(setWindowSize, 1000);
                         });
</script>
<?php
                    //echo'<nav class="menu_button"><span>menu</span></nav>';
                    session_start();


                    if (isset($_POST['windowSize'])){
                       // $_SESSION['windowSize'] = $_POST['windowSize'];
                        echo '<font size="7"> '+ $_SESSION['windowSize'] + '</font>';
                        if($_POST['windowSize'] <= 649){
                            echo'<nav class="menu_button"><span>menu</span></nav>';
                        }
                    }

                    ?>

試したこと

phpの
if(isset($_POST['windowSize']))
echo '<font size="7"> + $_SESSION['windowSize'] + '</font>';

ここで画面サイズがechoされていないので$_POST['windowSize']がnullであろうと予想し、
Javascriptの.ajax部分等をいじったりしてみたのですが、なかなかうまくいきません。

解決策をご教授いただけますと幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

まず、Ajaxの結果を受け取る部分の記述がありません。PHPがどうなってようと関係なく受け取れません。jQueryのAjaxは書き方が少しずつ変わっていますが、下記ページに書かれているのが最も古いものと最新のものです。(どちらもしばらく使えます)

【おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶) - Qiita】
http://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b


受け取ったHTMLをどこに挿入するかはわかりませんが、「画面サイズで書き換える」のは無駄が多い気がします。(追加したものをまた削除するなども考える必要がある)
メディアクエリを使ってCSSで表示非表示を分けるほうが一般的です。

【メディアクエリの書き方「レスポンシブwebデザイン導入方法」】
http://webuma.net/media-queries

【【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ】
http://scene-live.com/page.php?page=95


font 要素は廃止されています。span要素などにCSSで装飾するなどしましょう。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/30 04:37

    詳しい回答助かりました。

    メディアクエリを使用する事にしました。

    ありがとうございました!

    キャンセル

checkベストアンサー

+1

jsがよくわからないことになっていますね...たぶん、jsが実行されていないのが原因だと思います。
参考サイトのコードをまず動かしてみて、処理の内容を理解してから、一つ一つ動作確認をしながら変更してはどうでしょうか

あと、そもそも論ですが、レスポンシブなサイトを作るなら1つのHTMLで、CSSで画面サイズに応じて、表示を切り替えるやり方のほうが一般的かと思います。
http://webdesignerwork.jp/web/responsivewebdesign/
このやり方なら、HTMLとCSSでできますし
※まぁ一長一短あるので、一概には言えませんが....参考までに

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる