タグ

widthとdevice-widthに関するruedapのブックマーク (4)

  • 新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary

    そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。 新iPhoneの画面解像度は? まず、確かな情報筋()によると、4.7インチと5.5インチのモデルが出ると。 4.7インチは750×1334らしい。現行iPhoneのディスプレイと同じ326ppiなものを4.7インチにするとこうなると。5.5インチだとフルHDな1080×1920らしい。こちらは新しいディスプレイで401ppiだって。 さて、5.5インチについてはまだわかるんだけど、4.7インチの謎解像度はないのではないかと思っている。というのはデバイス非依存ピクセルを想像すると2つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけです

    新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary
  • mediaQuery における max-width, max-device-width の違い

    2013/11/13 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techCSSmediaQueryviewportSmartphone 最近改めて使い分けないとなーと実感したので、その実感を忘れないうちにメモしておこうと思います。 デバイスの幅(width)と device-width の違いについてそもそもの話ですが、そのデバイスで何ピクセル x 何ピクセルで表示できますよーという値と、 device-width の値は異なります。(結果的に同じ場合もあり得ますが) http://screensiz.es/ こちらに、デバイスごとの width, device-width がまとめてあります。たまに見ます。 iPhone 3GS の時代であれば、width = 320px, device-width = 320px であったので問題なかったのです

    mediaQuery における max-width, max-device-width の違い
  • Android 4.x のブラウザがヤバい

    2013年10月24日 著 ここ2週間ほど、TwitterAndroidのブラウザを酷評しているわけですが。そもそも「ブラウザ」って何だよ、というところからして気にわないのですけどね。何ですかブラウザって。一般名詞を固有名詞ぽく?使うだなんて、紛らわしいことこのうえない。デフォルトブラウザとも、標準ブラウザとも呼ばれることがあるらしいけれど、しかし表記は「ブラウザ」ってあるんだもん。当にむかつく......いや問題はそこじゃなくて。最近、最強にイライラしているのは、html - android autofit mode causing issues with css width in web page - Stack Overflowで紹介されている件。記事中にあるように、この問題には対応策が無いわけではなく、日語で紹介している記事もあります。 androidでwidthが効かない

    Android 4.x のブラウザがヤバい
  • Android4系のデフォルトブラウザでwidthが効かないバグとbackground-colorで回避出来るというメモ | kanonjiのブログ

    Android4系のデフォルトブラウザで、どうしてもレイアウトが崩れるという話を持ちかけられて、調べてみました。 どうもviewportを指定してない場合に、widthがdevice-widthより大きな値を指定しても、無視されるというものみたいです。 widthが効かないというのがどういう事か、文章だとよくわからないと思うので、再現させるコードと、それを表示したスクリーンショットを下の方に載せてます。 解決策 なにが起きるかと言うと、 p要素のwidthを無視して勝手に横幅が設定されて幅が短くなる。 androidのバージョンによって変わるみたいで、 android2系だと問題ないけどandroid4系だとおかしい(端末の違いも考えられるけど)。 いろいろやってみて、 なぜかbackground-colorを入れると意図した幅で表示された。 なんでbackground-c

  • 1