iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
ios11以前と以降での、-apple-systemの表示 - Qiita
iOSのsafariでは、font-family:-apple-system; でSan Franciscoフォントを表示させることができます。この-apple-systemの挙動が、iOS11以前と以降で微妙に変更になっています。 iOS10と11での表示の違い 以下、iOSシミュレーターでキャプチャした画像です。(左がiOS10、右がiOS11) "Hiragino Kaku Gothic ProN"; で指定した場合 ヒラギノだけ指定している場合、半角英数は当然ヒラギノのグリフになります。同じ字体のため、半角と全角が混ざっても高さが揃っていて自然な見た目になります。 -apple-system, "Hiragino Kaku Gothic ProN"; で指定した場合 ヒラギノから半角英数だけSFにした状態です。数字と「円」の部分の高さが顕著ですが、SFのほうがグリフの高さが小さいた
iPhoneシリーズの画面解像度とファーストビューのサイズ - console.lealog();
何度調べても忘れるのでメモ。 iOS7の場合を追加！ 画面解像度 iPhone3G: 320*480 iPhone4/4S: 640*960 iPhone5/5S/5C: 640*1136 ヨコ*タテ です。 いわゆるファーストビュー iOS6まで iPhone3G: 320*416 iPhone4/4S: 320*416 iPhone5/5S/5C: 320*504 iOS7から iPhone4/4S: 320*372 iPhone5/5S/5C: 320*460 ※ロケーションバーが出てるパターン ※`scrollTop`でロケーションバーが消せなくなったのでiOS6より狭くなった ふう。 372pxじゃなんもできませんぜー。
[ヅ] 強く押しすぎて iPhone 6s にヒビが入ってしまった(・∀・)!! (Force Touch / 3D Touch) (2015-10-01)
というネタ的な Web ページを作ってみた。 iPhone 6s (Plus) の Force Touch (3D Touch) 機能を使ったネタ的なサンプル。 ⇒ Force Touch (3D Touch) sample (音が鳴るので注意) iPhone 6s (Plus) + Safari でページを表示して、空の画像を強く押しこんでから離すと、 画面が割れたような画像が表示されてガシャーンて音が鳴るだけ。 Force Touch とは何か Force Touch は Apple の開発した感圧タッチパネル技術のこと。 3月10日のアップル Spring Forward スペシャルイベントで発表された Apple Watch と新MacBook はまるで別ジャンルの製品ですが、新技術「感圧タッチ (Force Touch)」を採用した共通点があります。 アップル、次期 iPhone
![[ヅ] 強く押しすぎて iPhone 6s にヒビが入ってしまった(・∀・)!! (Force Touch / 3D Touch) (2015-10-01)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a14797158356423dd9428859519b124a97b93db5/height=288;version=1;width=512/http%3A%2F%2Fwww.nilab.info%2Ff%2F0%2F20110915_regza_crash_397587604.jpg)
iOS 8.4.1の:hover問題
iOS 8.4.1の:hover問題 追記(2015年10月23日) iOS 9.0.2で確認した所この問題は解決していました。 ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a> サンプルページ iOS 8.4.1をお持ちでない方は以下の動画で確認できます。 SPサイトなら:hoverを利用するケースは少ないので使わ
I am expecting to iOS 9.0 Mobile Safari features. - latest log
iOS 9.0 に入るかもしれない機能をまとめてみました。公式なものではないため参考程度にお願いします。 WebKit 公式の Feature Status もご覧ください。 (ε・ ワ ・)з 40〜50時間ぐらいドブに捨てて書いている気がしますが、2分で読めます via https://github.com/uupaa/WebKitChangeLog/wiki/iOS9.x.x.changesets WebKit 600.1.4 以降の変化をまとめました。 WebKit の Changeset から読み取れる情報を元に構成されており、検証中のものが多く含まれています。あくまで予想です。 HTML/DOM node.style.webkitFontFeatureSettings が実装されました DocumentFragment に getElementById が実装されました Doc
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
iOSアプリ未インストール時にSafariでカスタムURLスキームを開く時の対策 - Qiita
iOSアプリケーションにカスタムURLスキームを実装し、SafariからそのURLを開く際にまだユーザがそのアプリケーションをインストールしていなければそのURLを開けずにページエラーになってしまう。その場合はアプリケーションをインストールする導線を張りたい。 対策1 workaroundとして以下のhackがある。 setTimeout(function() { window.location = "http://itunes.com/apps/yourappname"; }, 25); window.location = "custom-uri://"; hack1の説明 window.locationにてカスタムURLスキームを設定し、そのURLに対応したアプリケーションがない場合（Safari自身も対応していない場合）、window.location = "custom-uri:/
Overscroll.js
Overscroll.js, is a small javascript library, giving you the ability to peek and show small easter eggs when the screen is scrolled beyond the height of the window. (It's a touch based ios/osx thing)
ブラウザかWebViewか、どちらで開かれたのかを判別するには - console.lealog();
あると思った？ 残念、そんなものはない！ とはいえそれは"厳密に"やる場合の話で、今現在はなんとか・・なんとか・・・。 これを良しとするかはあなたのココロ次第です。 以下、奮闘記をお送りいたします。 20150813: 更新 ‘fullscreenEnabled’ in documentってすればもしかして(iOSのみ) https://github.com/uupaa/UserAgent.js こういうのもあるらしい 20150422: 更新 まさかのiOSのLINEアプリのWebViewのUAが変わったらしく、FacebookとLINEが判別できるように！ 20150407: 更新 まさかのiOSのTwitterアプリのWebViewのUAが変わったらしく、もうFacebookしか判別できないみたいです・・。 先に結論を書いておくと、現時点でiOSに限ってであればなんとかなります。 た
iPhone 6で改めて考える画面解像度とUI | dotproof
新しいiPhoneの6と6 Plusが発表になりました。従来モデルよりそれぞれ少しづつ大きくなっていますが、日本ではまた人気が出るのでしょうね。特にiPhone 6 Plusの方は5.5インチと発表されていますので、前のモデルよりかなり画面が大きくなっています。 iPhoneもiPhone 3から4になった時に画面の解像度が2倍になってretinaディスプレイと呼ばれました。解像度が2倍になったので従来のグラフィック（ビットマップ）は2倍の大きさのものを用意する必要になり、@2xグラフィックと呼ばれるようになりました。今度のiPhone 6でも画面の解像度（ppi）は同じなのでやはり@2xのグラフィックで対応します。 なんで画面のサイズは4インチから4.7インチに拡大されたのに、UIグラフィックのサイズは同じでいいのかとお思いの方に向けて、改めて画面解像度とピクセルグラフィックの関係を説明
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO
こんにちは、清田です。 WWDCの中で、次世代のSafari 8で「CSS Shapes and Compositiong」がサポートされたとのことで、 今回はCSS Shapesについてご紹介してみたいと思います。 CSS Shapesとは？ CSS ShapesのShapeは形を意味します。 CSSのプロパティから指定した任意の形状(Shape)に合わせて、レイアウトすることを可能にしたスタイルになります。 表現できる形は、丸、三角形、台形など簡単図形の描画や画像を形状として認識できるようです。 ブラウザの対応状況 以下の対応表を確認してみると、Safari 8から対応したのが確認できます。 導入方法について まず前提条件として、CSS Shapesを描画できるブラウザであることがあります。 基本的なでスタイルを反映方法は、従来の指定方法と同じようにdom要素に任意のid or cls
![[iOS 8] Safari 8で CSS Shapesが使えるようになった。 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/34de6d57437c5cfc77b749f99e4483a7a1702539/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fios81.png)
iOS7のsafariでonresizeが効かない？
フルスクリーンの背景画像を使用したサイトで、iOS7の画面回転時の表示が崩れるので直してほしいとの依頼。 レスポンシブではない普通のPCサイトなので、本来ならそのまま画面に収まるよう伸縮して表示されるはずなのだけど、 なるほど画面の向きを変える度に要素のサイズがガタガタになって、どんどん崩れていく。 背景画像関係のjsを見てみたら、一部省略するけど中身はだいたいこんな感じ。 function hoge() { var obj = document.getElementById("bgimg"); winWidth = window.innerWidth; winHeight = window.innerHeight; if(winWidth > winHeight){ obj.style.width = winWidth + "px"; obj.style.height = "auto";
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
