Designing Websites for iPhone X
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. The inset area is filled with the
考えを整理する最強ツールは紙！その紙をガジェットに進化させる「Livescribe 3 Smartpen」がもの凄い件！ – 和洋風KAI
ソフトバンクコマース&サービス株式会社様より、サンプル提供御礼。 PCが登場してからずっと「ペーパーレス ＝ 偉い」な風潮が続いていると思いますが、考えを整理するための最強ツールは未だに紙だと思っています。 やれiPadだ、Surfaceだと言われていますが、僕に言わせれば、これらの画面は狭すぎる。 今のタブレットに手書きしようと思うと、めちゃめちゃ狭い紙に細々と書いてる気分がして、頭に血が上ってしまうんですよね。 というわけで、アプリのUIや、プログラムを考える時は紙をよく使っています。 しかし、紙は紙だけに保存がめちゃめちゃ面倒なんですよね。そこらへんにある紙に走り書きすることも多いので、「あれ？あの紙どこだっけ？」ってことが結構多いんです。 「今、紙に書いてるものがリアルタイムにデジタルに保存されたらどんなにいいだろう」といつも思ってましたが、なんとそれを実現する、紙をガジェット化し
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
iPhone 6 Screens Demystified | PaintCode
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree
iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー | | 大阪のWeb制作屋Lavison
By Masaki 2014.09.26 WEB iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー こんにちは、masakiです。 iPhone6、出ましたね～。 iPhone6 Plusはちょっと大き過ぎなので個人的にNGです。あれは巨人用のスマホです。（嘘です） iPhone6 Plusの操作性とレイアウトについて 注目して欲しいのはiPhone6 Plusはタブレットではなく、「スマートフォン」の位置づけであるということです。 Plusを片手で操作するにはやはり難があり、タップしようにも指が届かないのです。大きすぎて、、 それでも片手親指で操作する方は実際にいます。そうした時にメニューボタンなど良く触れるボタンなどを上部に置くのは酷いUI。 こういった巨大なスマホ（もはやスマートではないが…）がPlusを筆頭にこれからどんど
The Ultimate Guide To iPhone Resolutions
UPDATE: We have added the new iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max to the guide below. The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only
ソフトバンクモバイルのiPhone契約で利用出来るソフトバンク Wi-Fi スポット(i)の「BBモバイルポイント」をMacから利用する方法 | ネットワーク | Mac OTAKARA
WEPパスワードを求められた場合、mobilepointのWEPパスワードを入力して、ログイン画面に入ることは出来ます。 WEPパスワードは、iPhone 3Gの頃から提供されているのと共通で、ワイヤレスゲート設定などを確認して下さい。 なお、セキュリティ「WEP 40/128ビット 16進」を選択しないと、上手く行かない場合があります。 ログイン画面が表示されたら、そこに、ユーザーID「xxx@i.softbank.jp」、パスワード「i.softbank.jp で使用するパスワード」を入力します。 ログインボタンをクリックすると、最初に掲載した「このIDはiPhone又はiPadからの接続でしかご利用できません(20)。」が表示されます。
デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
iPhoneのSafariでは大きすぎる背景画像を使うと自動縮小されてしまう - F.Ko-Jiの「一秒後は未来」
CSS で backgroundImage に縦横サイズの大きな画像を指定していたりするサイトを iPhone の Safari で見ると、背景画像が自動的に縮小されてしまうんですね。 あまり大きな画像を使うことがないので知らなかったのですが。 具体的には、縦×横の画素数が 2,000,000 ピクセル(200万ピクセル)を超えるとだめらしいです。 » DEfusion.org.uk » Shrinking large background image bug in iPhone Safari なので、例えば 1,440 x 1,800 のサイズだと画素数が 2,592,000 ピクセルなので、そのままのサイズでは表示できず、縮小されて残念な感じになってしまいます。 一方で、例えば 1,188 x 1,584 のサイズであれば、画素数は 1,881,792 ピクセルで、200万画素より小さ
WebページをRetina対応させるテクニック～基礎知識編
メディアクエリ―高精細ディスプレイに対応させるには -webkit-device-pixel-ratioについて 先のデバイスピクセル比（device pixel ratio）の項目でも解説しましたが、高精細ディスプレイ向けにCSSで対応するにはメディアクエリ（Media Queries）を使うわけですが、その際の条件式に用いられるのが、「-webkit-device-pixel-ratio」というものです。Retinaディスプレイ搭載のiOS端末を例に取ってみましょう。 Retinaディスプレイのデバイスピクセル比は「2」です。つまり、デバイスのピクセル密度の最低値が2の場合のみスタイルを適用するというメディアクエリを指定すれば良いわけです。 と、ここまで解説しておいて何ですが、この-webkit-device-pixel-ratioはもともと、アップルがRetinaディスプレイを開発し
Mac で iPhone シミュレータを直接起動する方法（と、そもそものインストール方法）
Mac で iPhone シミュレータを直接起動する方法（と、そもそものインストール方法） 2012年12月14日 16:54Mac Mac に Xcode を入れると iPhone (iOS) シミュレータをインストールできますね。 Xcode で iOS アプリケーションの開発をしているときなら プロジェクトから起動できます。 でもちょっと iPhone の Safari でウェブサイトを表示したいぐらいの時に いちいちそんなことやってたら日が暮れてしまうので iOS シミュレータを直接開けるようにしといた方がいいかもしれません。 公開されてるサイトならまだ実機で見られるけど シミュレータのブラウザなら開発機の localhost にもアクセスできるし。 けどこのシミュレータがどこにあるか ちょっとわかりにくいのでメモしておきます。 シミュレータのありか シミュレータは Xcode の
Safari 6とiOSシミュレータの組合わせでインスペクタ表示ができる！ | SCRIPTCHIPS
さて前回の記事『iOSシミュレータでインスペクタ表示を可能にするiWebInspector – OS X 10.8(Mountain Lion)では動作せず、、、』にてiwebinspector導入顛末を書きましたが、Mountain Lionを使用している場合は動作しないのでAppleオフィシャルのインスペクタを利用する方法を紹介します。 Safari 6 × iOSシミュレータ Safari 6 とiOSシミュレータを既に導入している方は特に新しくアプリケーションをインストールする必要はありません。 iOSシミュレータの設定 Settings > Safari >Advancedを選択 Web Inspectorの項目をONに Safariを開いてインスペクタを表示させたいページにアクセス Safari 6の設定 iOSシミュレータ側の設定が完了し、Webも表示終わったら、MacのSa
iOSシミュレータとSafariを使用したスマートフォン向けサイトの動作確認について - KYOHON
2012-09-24 iOSシミュレータとSafariを使用したスマートフォン向けサイトの動作確認について xcode Web iOSシミュレータのSafariでサイトの表示確認を行なっている時に、MacのSafariのWebインスペクタが使えることに気づきました。 前提条件 Mac OS X xcodeがインストールされている Safariがインストールされている Safari>環境設定>詳細>[□メニューバーに"開発"メニューを表示]にチェックを付与しておく iOSシミュレータのパス(Dockに追加しておくと便利です) /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app 確認手順 iOSシミュレ
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mydevice.io know your mobile device (pixel-ratio, CSS width, features)
あのiPhoneの純正イヤホン「EarPods」を、しっかり耳に固定してくれるアクセサリー「sprngclip」 - isuta（イスタ） -私の“好き”にウソをつかない。-
Loading...