[B! iOS] extra_numberのブックマーク

WindowsでiOS Safariの実機デバッグをする - ぽにょろん

仕事でちょいと使う機会があったので、メモとして残します。因みに原因はただのクエリセレクタの記法ミスだったのですが、何故か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

extra_number 2022/03/09

iOS
windows

リンク

これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック

高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。

extra_number 2021/08/24

リンク

「3D Touch」非対応のiPhone XR　代わりに搭載された「Haptic Touch」でできること - ITmedia Mobile

「iPhone XR」でさりげなく省かれている機能が「3D Touch」だ。3D Touchは、ユーザーが画面を押し込むことによって、さまざまな操作を可能にする機能。例えばホーム画面のアプリアイコンを押し込んでショートカット操作一覧を呼び出したり、URLを押し込んでページをプレビュー、さらに押し込んでアクセスしたりできる。これらの操作は、ディスプレイに組み込まれたセンサーが指の圧力を検知することで実現している。以下は3D Touchでできることの例。ホーム画面のアイコンを押し込むと、アプリごとにショートカット一覧を表示できる（写真＝左）。写真アプリでサムネイルを押し込むと、写真をプレビューできる（写真＝右）この3D Touchは、「iPhone SE」を除く「iPhone 6s」以降のiPhoneが対応している。iPhone XRで突然3D Touchがなくなった理由は定かではないが、

extra_number 2020/01/08

リンク

スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto

スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースの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

extra_number 2019/07/31

リンク

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント

スマホで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