仕事でちょいと使う機会があったので、メモとして残します。 因みに原因はただのクエリセレクタの記法ミスだったのですが、 何故かChromeでは動いてしまうというアレなアレでした。 目次 目次 TL;DR 検証環境 モチベーション iOS WebKit Debug Proxyとは インストール 手順 最後に TL;DR ios-webkit-debug-proxy*1を使う ios-webkit-debug-proxyのReadMeに従う 端末の設定-Safari-詳細の「Webインスペクタ」をOn iTunesがインストールされていること 検証環境 iOS11/iOS9 ios-webkit-debug-proxy 1.8.4 Windows10 1809 モチベーション iOS実機SafariでのWebページの挙動をWindows環境で確認したい。 Android版ChromeやPC版Ch
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
「iPhone XR」でさりげなく省かれている機能が「3D Touch」だ。3D Touchは、ユーザーが画面を押し込むことによって、さまざまな操作を可能にする機能。例えばホーム画面のアプリアイコンを押し込んでショートカット操作一覧を呼び出したり、URLを押し込んでページをプレビュー、さらに押し込んでアクセスしたりできる。これらの操作は、ディスプレイに組み込まれたセンサーが指の圧力を検知することで実現している。 以下は3D Touchでできることの例。ホーム画面のアイコンを押し込むと、アプリごとにショートカット一覧を表示できる（写真＝左）。写真アプリでサムネイルを押し込むと、写真をプレビューできる（写真＝右） この3D Touchは、「iPhone SE」を除く「iPhone 6s」以降のiPhoneが対応している。iPhone XRで突然3D Touchがなくなった理由は定かではないが、
スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。 Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
