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
iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) - Qiita
今年10月に発売が予定されているiPhone Xは、その独特なディスプレイの為にセーフエリアを意識したウェブデザインが必須です。iPhone Xで意図せぬ表示にならないように実機の購入が必要だと考えるかもしれませんが、実はmacOSユーザーであれば、iPhone Xを購入せず無料でウェブページの表示確認を行えます。このエントリーでは、iPhone Xでの表示確認方法について紹介します。 ▲ iPhone Xでの表示確認をしている様子 iPhone Xで起こりうる意図せぬ表示 たとえば、画面最下部にコピーライトを固定表示しているサイトをよく見かけますが、iPhone XのSafariではメニューバーを表示する為のボタンで隠れる可能性があります。また、横持ちでコンテンツの左右が途切れてしまう可能性もあります。 ▲ 「iOS Human Interface Guidelines」より これらの表
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
Removing the White Bars in Safari on iPhone X
The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape. To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and
"The Notch" and CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on t
最近のoverflow: scroll事情 - console.lealog();
もちろんモバイル情報です。 iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの？っていう。 overflow: scroll 対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。 ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた！すばらC！ -webkit-overflow-scrolling: touch 勘の良い人ならお気づきでしょうが、コレも使いたいですよね。 スクロールできる部分で慣性スクロールができるようになるやつです。 .carousel { overflow: scroll; -webkit-overflow-scrolling: touch; } みたいな。 ただこいつは、まだ要注意です・・。 手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、 一応こ
WebKit、次期Mobile Safariでリンクやボタンをタップする際に発生する350ミリ秒の遅延を無くす仕組みを採用へ。
現在Mobile Safariではユーザーがボタン（またはリンク）が表示されている画面をタップした際、「そのタップがボタンを押したものなのか？それともダブルタップして画面を拡大しようとしているものなのか？」を判断するために350ミリ秒のインターバルを設けているそうですが、現在のiOS版WebKitにはこの遅延を無くす仕組みを取り入れているそうです。 However, when a user has tapped once, WebKit cannot tell if the user intends on tapping again to trigger a double tap gesture. Since double tapping is defined as two taps within a short time interval (350ms), WebKit must wai
Momentum Scrolling on iOS Overflow Elements | CSS-Tricks
Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn’t. You can add it bac
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
![[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/08b792dc919b5df541e06c5e157286ce8e586603/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2Fios.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - pfrankov/iphone-x-notch
TechCrunch | Startup and Technology News
