タグ

iphoneとandroidに関するnitoyonのブックマーク (4)

  • 寸法と解像度のチートシート

    その他の寸法 ハガキ … 148 mm × 100 mm (A6 より横が 5 %程度短い) 名刺 … 91 mm × 55 mm (B8 より横が 1 割程度短い) レター … 279 mm × 216 mm (A4 より縦が 1 割程度短く,横が数%長い) 新聞 … 開いた状態で 813 mm × 546 mm (A1 に近いが少し小さめ) クレジットカード … 85.6 mm × 54.0 mm 磁気カード … 85.0 mm × 57.5 mm テレホンカード … 86.0 mm × 54.0 mm CD … 直径 120 mm (穴は直径 15 mm,印刷可能範囲は直径 46 〜 116 mm の範囲) 証明書の写真の寸法 パスポート … 縦 4.5 cm × 横 3.5 cm 履歴書,TOEIC … 縦 4 cm × 横 3 cm TOEFL,英検 … 縦 3 cm × 横 3

    nitoyon
    nitoyon 2012/11/04
    各種デバイスのサイズ・解像度、紙のサイズ。
  • アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール

    モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSWindowsChromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ

    アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
    nitoyon
    nitoyon 2012/03/08
    iPhone/Android で Chrome 表示中のページを同期・inspect できる Chromeエクステンション。PC からモバイルデバイスの HTML 構造・CSS も確認できる。便利そう。
  • blog|解像度に依存しないモバイルユーザーインターフェース(2010/08/24) | Ext Japan Blog

    この記事は8/23に掲載された「Resolution Independent Mobile UI」を訳したものです …または… ピクセルはピクセルじゃないんです。 「SASSとCSS3のメリット(the benefits of SASS and CSS3)」(英語、未訳)という記事の中で、解像度に依存しないユーザーインターフェースを実現するためにSencha Touch内で活用しているテクニックについて簡単に解説しました。今回の記事では、読者がUI開発を行う際に役に立つように、そのテクニックについてもう少し詳しく解説してみたいと思います。 概要 この記事はアダプティブなレイアウトや、レスポンスの良いWebデザインについてのものではありません。この記事は、デザイナーにとって比較的新しい関心事となった、「ピクセル密度」に注目したものです。モバイル環境において、画面の解像度は急速に進化しています

    nitoyon
    nitoyon 2012/03/04
    解像度によって柔軟にフォントサイズを変えるための工夫。em でのサイズ指定、SVG、body へのクラス指定でベースのフォントサイズを指定、メディアクエリー resolution への期待、-webkit-min-device-pixel-ratio。
  • Android対応スマートフォンサイトのレイアウト(viewport・コンテナ編)

    最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhoneAndroidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭

    nitoyon
    nitoyon 2012/03/04
    スマートフォンでは viewport を device-width、コンテナはwidth:100% にしてデザインするのが自然。iPhone に向けて 320px で作ってしまうと、Android の多様な解像度に対応できない。
  • 1