スマホサイト制作初心者です。
何冊か関連の書籍を見てアレコレ試作しているのですが上手くいかない点・質問点がありこちらでご教示いただければと思い投稿しています。
現在制作しているサイトはhtml5/css3のWordPressでレスポンシブWEBデザインです。
自身はiPhone4・GALAXYタブレットを所持しています。
ちなみに周りにスマホサイト制作経験者・知識を持った者がおりません。
◇上手くいかない点◇
●スマートフォン用にCSSを分けるとPCサイトのIE6~8が崩れる
今までに制作したWEBサイト(PCのみ)は旧ブラウザでも崩れはありません。
◇質問・分からない点◇
●ブレイクポイントはどのように分けていますか?
自身は (min-width: 900px) , (min-width: 481px) and (max-width: 899px) , (max-width: 480px) に分け、PC用は(min-width: 900px) に含まれるのでそこに記述しています。
手持ちの書籍にはブレイクポイントについて掘り下げて説明がないのでこの分け方で正しいのか気になります。
●ブラウザチェックには何を使用されていますか?
自身は実機(PC・iPhone4・タブレット)とIETESTER、その他PCブラウザを使用していますが、他キャリアのチェックはどのようにしたら良いか分かりません。
●余談ではありますが、ローカルファイルをIE10で開くとCSSが反映されないのですがこれは互換表示の設定の問題ということで間違いないでしょうか?
質問が多くて申し訳ありませんがご回答よろしくお願いします。
上記で制作において間違っている点・改善点のご指摘、参考サイトなどがあれば遠慮なく言っていただけるとありがたいです。
みんなの回答 1 件
>スマートフォン用にCSSを分けるとPCサイトのIE6~8が崩れる
「分けると」がよくわかりませんが、分けてPCで読まない方に必要なレイアウト指定が入って居ませんか。
PIE.jsはちゃんとロードされてますか。
>ブレイクポイントはどのように分けていますか?
max-width: 768pxのみ。
それ以上分けてもあんまり意味が無いと感じるようになりました。
ちなみに、レスポンシブ関連で勉強会の講師やってる人もそのように発言してました。
>ブラウザチェックには何を使用されていますか?
Androidのエミュレータ、iOS実機、モダンブラウザ実機、IEは7以上しか見ないのでIEの開発者ツールと、怪しいところは実機ですね。
>余談ではありますが、ローカルファイルをIE10で開くとCSSが反映されないのですがこれは互換表示の設定の問題ということで間違いないでしょうか?
ローカルファイルってfile://でHTMLにアクセスしたときですよね?
手元のIE10では表示されてます。
パスじゃないでしょうか...
関連するトピックス