• 締切済み

タグを入れてるのにスマホ用サイズで表示されない

スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもＰＣサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか？

  • CSS
  • 回答数1
  • ありがとう数4

みんなの回答

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

<link rel="stylesheet" type="text/css" href="http://Server/test.css">" の最後の”が余計なのではないでしょうか？ lintで文法チェックもしてみたらいかがでしょう。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 画像の表示をリキッドにする方法

    android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。 画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    • ベストアンサー
    • HTML
  • スマホとPCの表示をクリックで切り替える方法

    初心者でスマホ対応に困っております。 同一ページ（ワンソース）で対応できるようにしようと javascriptのuserAgent（※以下参照）でPC用とスマホ用の 表示CSSが切り替わるページを作成しています。 スマホサイトのフッターによくある「PC」へのリンクをクリックすると スマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。 また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。 環境は「.htaccess」と「php」が利用できないサーバです。 できればウィンドウサイズで表示が切り替わるのではなく、 リンクをクリックするだけで PC用とスマホ用のCSSを切り替えたいと思っております。 色々と探してみたのですが、なかなか思うソースが見つからなかったので、 実現可能かどうかも踏まえてご教授いただけますと幸いです。 以下、こんな感じでCSSを切り替えております。 if (navigator.userAgent.indexOf('iPhone') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); } else if (navigator.userAgent.indexOf('iPad') != -1) { document.write('<link rel="stylesheet" href="css/iPad.css" />'); } else if (navigator.userAgent.indexOf('Android') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); }; どうぞよろしくお願い申し上げます。

    • 締切済み
    • CSS
  • body内にmetaタグを記述は問題ありますか？

    宜しくお願い致します。 某ネットショップASPを使用してECサイトの構築を行っているのですが、 注文手続きの画面はほぼカスタマイズ不可です。 この注文手続きのページでは metaタグが下記の内容に設定されています。 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> この記述を下記のように変更したいです。 <meta name="viewport" content="width=device-980, user-scalable=yes, initial-scale=1.0, maximum-scale=1.6,minimum-scale=0.25"> ですが、メタタグの変更は出来ない仕様のため、 body内に希望のmetaタグを記述してそちらを適用するようにできればと思っています。 そこで質問なのですが、 ●body内にmetaタグを記述するとスパム扱いあれたり、 　seo面で問題などありますでしょうか？ （注文画面のため、このページが検索上位になる必要はないのですが、 　他のページに影響があったら問題あります・・・。） ●body内にmetaタグを記述する方法以外に、 　元々入っているmetaタグを適用させない方法はありますでしょうか？ 何か良い方法がありましたら、教えていただけますと嬉しいです。 どうぞ宜しくお願いします。

  • スマートフォンの画像サイズ

    スマートフォンのデザインを640pxで制作し、スマートフォンサイトを構築中です。 viewport の設定を <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> とし、画像を640pxで制作したサイズで切り出していますが スマートフォンで実機確認すると、縮小されず、倍のサイズで表示されてしまいます。 幅640pxで作成したデータを、半分に縮小したもの（320px）を画像として切り出すのが正しい方法なのか、それとも、切り出した画像の<img … width=" 半分のサイズ ">にするのでしょうか？ それとも、幅640px で作成した画像を切り出して、自動的に縮小されるようにする方法があるのでしょうか？ いろいろ調べたのですが、よくわからず（調べ方も分からず…）困っています。 無知で申し訳ないのですが、よろしくお願いいたします。

    • 締切済み
    • CSS
  • スマートフォンの画面サイズに合わせてページを表示

    スマートフォンの画面サイズに合わせてページを表示させるために「viewport」 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 上記のタグを使用したのですが、iPhoneの場合は大丈夫なんですけれど、アンドロイドの場合、スクリーンサイズよりも大きく表示されてしまい困っています。 この「viewport」のタグを<head>～</head>内に入れるだけではダメなのでしょうか？　 webでの検索で探し方が悪いのか「viewport」の紹介してあるページにしかたどりつけていません、こちら以外の方法もあるのでしょうか？ もし解決方法をご存知の方がいましたら解答お願いします。

  • ジオシティーズ　横幅　広告のサイズになる

    ジオシティーズでＨＰを作っているのですが <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" /> を入れているのに、 スマホで表示するサイズが 広告のサイズより小さくなりません。 <div id="main"> にたしいて #main{ width: 200px; } としているのですが、添付画像の様になってしまいます。 広告に合わせて作るしかないのでしょうか？

  • PCとスマホでの解像度でのCSS振り分け

    現在以下の方法でスマホ表示へ振り分けています。 <meta name = "viewport" content = "width = 501" /> <link href="/styel.css" rel="stylesheet" type="text/css" /> <link media="only screen and (max-device-width:410px)" href="/smart.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:481px)" href="/styel.css" type="text/css" rel="stylesheet" /> 疑問なのですがこのコーディングでiphone4ではsmart.cssで表示されます しかしiphone4は620pxなのに何故最大解像度で振り分けられるのでしょう？ styel.cssで表示されると思うのですが。 またドコモの最新のスマホではstyel.cssで表示されます、それは720pxなのですが 上記の指定でmax-device-width:720pxとかすればいいのでしょうか？ よく分からなくなって来ました。解像度での振り分けは不確定なのでしょうか UAで行うにしても機種は膨大にあるので容易ではないと思うのですが スマホでの振り分け方法についていい方法があれば教えていただきたいのですが よろしくお願いします。

    • 締切済み
    • CSS
  • <meta name="viewport" con

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> と言うタグ・ソースは 「サイトをスマホで表示させるためのタグ・ソース」 と覚えればいいのでしょうか?

    • ベストアンサー
    • HTML
  • スマホサイトでrotate();を使いたい。

    スマホサイトで、下記の様に背景をposition:fixedを使い固定させて表示しているのですが、 -webkit-transform: rotate(); が使えない、というところでつまずいています。 viewportの user-scalable=no　を　user-scalable=yes　にすると、 rotate(); は使えるのは分かったのですが、position:fixedが使えなくなります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body> <div style="position:fixed;top:0;"> <p class="img01"><img src="images/dammy.jpg" id="img01"style="position:fixed; top:0; -webkit-transform: rotate(10deg);" /></p> </div> </body> </html> 苦肉の策で、下記の様に書いてみましたがダメでした。。 <script> if (navigator.userAgent.indexOf('iPhone') > 1 || navigator.userAgent.indexOf('Android') > 1 || navigator.userAgent.indexOf('iPod') > 1 ) { document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes" /></head><body><p class="img01"><img src="images/dammy.jpg" id="img01" /></p></body></html>'); }else{ document.write('<p class="img01"><img src="images/dammy.jpg" id="img01" /></p>'); } </script> どなたか良い方法があればご教授頂けると大変助かります。 よろしくお願いします。

  • viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> と <meta name="viewport" content="width=device-width, initial-scale=1" /> は意味は同じですか？ 違いは 1.0か1かと 最後にスラッシュがあるかです。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する