質問: スマホ専用サイトを開発する際、皆さんがどのように進めているのか教えていただきたいです。 具体的には ・いつも横幅を何pxにしているのか(http://qiita.com/fnobi/items/4bec5ddf4ea83c5e1820 を読んだのですがよくわかりません。viewportにdevice-widthを設定するのがベストであるなら、どんな横幅でも構わない気がしたのですが。そのpxにする理由が知りたいです) ・どのように開発していますか(chromeのデベロッパーツールやAtomのAtom-html-previewとかですか?他にもっと良い方法があれば教えてください。) その他、作成する際に気を付けるべきことを教えていただきたいです。 また、できれば教えていただきたいのですが偶然みつけた https://github.com/cocos2d/cocos2d-html5/blob/develop/cocos2d/core/platform/CCEGLView.js の中にhigh-dpiやlow-dpiなどがあり、解像度は奥が深いなあと思ったのですがjavascriptでサイトの横幅を端末の横幅に合わせた方がいい(正確?)のでしょうか。 参考書は買ったのですが結局どうしたらいいのか分からず手詰まりになったので質問させていただきました。
回答: > > ・いつも横幅を何pxにしているのか(http://qiita.com/fnobi/items/4bec5ddf4ea83c5e1820 を読んだのですがよくわかりません。viewportにdevice-widthを設定するのがベストであるなら、どんな横幅でも構わない気がしたのですが。そのpxにする理由が知りたいです) > > > ここで言う「横幅」は、おそらくデザインカンプ(兼コーディング素材)を作成する時の横幅であると思われます。デザインカンプは固定px幅で作らざるをえないので、それを何ピクセルで作るのが良いか、という話です。 従来は最も一般的な4インチiPhoneの横幅である320pxの2倍=640pxで作っておくのが主流でしたが、 iPhone6の登場で、デザインカンプも375pxの2倍=750pxで作ったほうが良いのではないか、というのがそちらのブログの方の考えということでしょう。 > > ・どのように開発していますか(chromeのデベロッパーツールやAtomのAtom-html-previewとかですか?他にもっと良い方法があれば教えてください。) > > > 私は開発中は主にchromeのデベロッパーツールで確認し、大体出来てきたらあるところでサーバに移して実機のiPhoneやAndroidで確認していますね。。。良い方法は私も知りたいです。 > > javascriptでサイトの横幅を端末の横幅に合わせた方がいい(正確?)のでしょうか。 > > > これをやりだすといろいろ難しいことになりそうなので、通常は横幅はviewportをdevice-widthにして各端末の画面幅に自動フィットするように作っています。 この場合、様々な横幅で閲覧されることになりますので、デザインやHTMLの構造としては必ず「横幅可変」に耐えられるように作っておくことが大前提となります。 例外としてデザインの時点で横幅可変にすると破綻するようなものになっている場合は、固定幅のコンテンツをjavaScriptでzoomさせて見せることもあります。 上記はあくまで「Webサイト」の場合の話ですので、ネイティブアプリとかの場合ですと話は違ってくるかもしれません。ご了承ください。