• 締切済み

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
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

この指定では ・すべてのデバイスは、基本的にはstyle.cssを適用 ・media="only screen and を解釈するデバイスについては 　410px以下のデバイスは　smart.css 　481px以上のデバイスは、style.css となりますから、スマホはすべてstyle.cssが適用されます。 maxとは、最大 minとは、最初と言う意味です。 　なお、スマホのディスプレイ自体の解像度(dpi)が高いので、PC用と同じ画像ではぼやけてしまいます。使用する画像はページ内で320px幅で表示するなら、640px程度で作成してwidth属性で320pxに指定するなどの工夫も必要です。 <link href="/styel.css" rel="stylesheet" type="text/css" /> 　永続的スタイルシート(media属性もtitle属性もないスタイルシート)ではなく、media属性はつけておいたほうが良いです。そうすると印刷(media=print)には、ブラウザのもつスタイルシートで印刷されます。 　viewportの値ですが、基本的には表示するウェブページの幅を縮めて行って、スクロールバーが出てしまうサイズにしておけば良いでしょう。当然、デバイス幅よりも広いのが通常です。なぜ501にして、デバイス幅を780pxと考えられるのかがよくわかりません。 　 　

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

関連するQ&A

  • widthでcss,js切換可能でしょうか。

    【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。

  • CSSでPC用、他のスマホ用、PC用を扱うには？

    こんにちは。 html5を準拠するようにサイトを構築している者です。CSSでPC用、スマートフォン用、iPhone用に分けようと考えています。 http://mnemoniqs.com/web/one-css-smartphone/ 上記のサイトにて、 1 <!--メインCSS--> 2 <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 3 <!--スマホ用CSS--> 4 <link media="only screen and (max-device-width:480px)" href="css/smartphone.css" type="text/css" rel="stylesheet"/> この様に書いてありますが、私はauのAndoroidスマホを使用していまして、widthが481px以上になる環境です。それで自サイトをみると、PCでは3ペイン、スマホでも縮小された左右のペインがあります。iPhone、他のスマホでは左右のペインをなくして、メインだけを表示したいのです。 例として http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html では、スマホで見ると左右のカラムが消えて、文字が大きくなり見やすく見やすいです。ですが私のサイトではそれが出来ていないのでそうはいきません。 ちなみにPCブラウザで http://blog.livedoor.jp/dqnplus/archives/lite/1750885.html を表示するとリダイレクトでPC用サイトに行ってしまいますので調べることが出来ませんでした。 どなたか1ページをCSSを使ってPC用、iPhone用、普通のスマホ用にする事が出来ないでしょうか？ お導きの事よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • スマホと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
  • php？でスマホ用のCSSへ切り替える記述について

    php？でスマートフォン用のCSSへ切り替える記述について質問です。 HTML/CSSの知識はあるのですがPHPについてはさっぱりで… お力を頂ければと思います。 今度CSSの切り替えでスマートフォン用のサイトを表示することになったのですが、 一部システムが絡んでいるため切り替え方が分かりません。 拡張子は.ctpです。 HTML/CSSで下記の記述にしています。 <link rel="stylesheet" type="text/css" href="../_common/css/import.css" media="all and (min-width : 706px),print" /> <link rel="stylesheet" type="text/css" href="../_common/css/_phone/import.css" media="only screen and (max-width : 705px)" /> PHP？でCSSを読み込む部分は <?php echo $this->Html->meta('icon'); echo $this->Html->css('/_common/css/import.css'); echo $scripts_for_layout; ?> と記述されています。 上記にどういった記述を加えればHTML/CSSのような切り替えが可能でしょうか？ もしくは、全く別の部分をいじらなければならないのでしょうか？ よろしくお願い致します。

    • ベストアンサー
    • PHP
  • ie8メディアクエリによるcss分岐ができない

    ie8でメディアクエリによるcssの画面サイズ分岐ができなくて困っています。 環境は、windows XP Service Pack3です。 1.下記方法でIE8以下にもHTML5とメディアクエリを使えるようにしました。 　(HTML5はバリデータでチェック済みです。) <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 2.下記方法でデバイスの横幅に対応したcssを指定しました。 <link href="smartphone.css" media="screen and (max-width:480px)" rel="stylesheet" type="text/css"> <link href="tablet.css" media="screen and (min-width:481px) and (max-width:1024px)" rel="stylesheet" type="text/css"> <link href="pc.css" media="screen and (min-width:1025px)" rel="stylesheet" type="text/css"> 3.現象 a. firefoxではローカル上のページもサーバー上のページも適用されていました。 b. ipodではサーバー上のページしか見ていませんが、適用されていました。 c. しかし、ie8ではローカルでもサーバーにアップしてもcssが適用されません。 d. ie8では、media="screen"だけの場合は適用されていますが、and以降のサイズ指定が入ると適用されません。 e.type=などの指定もアリ、ナシどちらの組み合わせも適用されません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • レスポンシブデザインにする方法、参考サイト

    現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 htmlの<head>部分に <link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="css/layout.css"> <link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/tabletcss"> <link rel="stylesheet" media="screen and (min-width:480px)" type="text/css" href="css/smart.css"> と記述し、cssを３種類用意し、各cssに @media screen and (min-width:480px) { img{ max-width: 100%; height: auto; width /***/:auto;　 }・・・以下各要素省略 } とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。 リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか？ それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。 一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。

    • ベストアンサー
    • CSS
  • ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが

    記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。

  • インラインフレーム内のcssを親フレームに適用する

    インラインフレーム（子ウィンドウ）に表示されているページ（同一ドメイン上のページです）で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6～8と、Firefoxを想定しています。

  • 【PHP】UA判別によるCSSの振り分け

    PHPはドのつく初心者です。 現在PHPでCSSの振り分けに挑戦しています。 私が持っている機種はauガラケーとAndroidだけですので、iPhoneなどの挙動確認はFireFoxのUA変更アドオン「User Agent Switcher」で行っております。 auガラケー実機で以下のPHPは正しく振り分けられていたのですが、FireFoxのアドオンにてDoCoMoのUAでアクセスした場合に、ガラケーのCSSに加えてPC(その他)のCSSが読みこまれてしまいました。 <link rel="stylesheet" type="text/css" href="garak.css" media="all"> <link rel="stylesheet" type="text/css" href="design.css" media="all"> ↑このような感じです。 auのUAアクセスでも同様の症状が発生していますが、こちらはガラケー本体で動作確認できているので大丈夫だとは思います。もしかしたらちゃんと実機で読みこめば行けるのかな？と思いつつ、不安が残っております。 DoCoMo実機は家にないので確認の仕様がありません。 以下のPHPでDoCoMo機種の動作は正しくいくのでしょうか？ <?php $ua = $_SERVER['HTTP_USER_AGENT']; if ((strpos($ua,'DoCoMo') !== false) || (strpos($ua,'KDDI') !== false) || (strpos($ua,'UP.Browser') !== false) || (strpos($ua,'J-PHONE') !== false) || (strpos($ua,'Vodafone') !== false) || (strpos($ua,'SoftBank') !== false) ) { echo '<link rel="stylesheet" type="text/css" href="garak.css" media="all">'; } if ((strpos($ua,'iPhone') !== false) || (strpos($ua,'iPod') !== false) || (strpos($ua,'Android') !== false) ) { echo '<link rel="stylesheet" type="text/css" href="smart.css" media="all">'; } else { echo '<link rel="stylesheet" type="text/css" href="design.css" media="all">'; } ?>

  • cssの振り分けについて

    下記のjavascriptの内容でわからないのでおしえてください。 if(cssFile){ if (document.getElementById && !opera5 && !opera6 && !(mac && ie5) && !icab){ var head = document.getElementsByTagName('HEAD').item(0); var newLink = document.createElement('LINK'); newLink.rel = "stylesheet"; newLink.type = "text/css"; newLink.href = cssFile; head.appendChild(newLink); }else{ document.open(); document.write('<link rel="stylesheet" href="' + cssFile + '" type="text/css">'); document.close(); } } よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する