iPhone用のWebインスペクタを使おうとすると「調査可能なアプリケーションがありません」といわれる - Qiita参考リンク iOS6からの新機能！iPhone Safariで表示したページのデバッグがすんごく楽になるWebkit Webインスペクタがスゴい 現象 上記の記事の通りに進めて、Safariのメニューで開発→xxxのiPhoneを選択すると「調査可能なアプリケーションがありません」と言われる。 解決策 iPhoneのSafariの設定メニューで、プライベートブラウズをオフにする
Full Third-Party Cookie Blocking and More
This blog post covers several enhancements to Intelligent Tracking Prevention (ITP) in iOS and iPadOS 13.4 and Safari 13.1 on macOS to address our latest discoveries in the industry around tracking. Cookies for cross-site resources are now blocked by default across the board. This is a significant improvement for privacy since it removes any sense of exceptions or “a little bit of cross-site track
iOSシミュレータの導入手順
在宅勤務がメインとなった今、モバイル実機端末のブラウザ検証が難しくなっていると思います。そこで、Mac上で使えるiOSシミュレータを紹介します。 これはApple公式の開発環境Xcodeに付帯するものなので実機再現度が高く、Androidを除く様々なOS・端末のブラウザ検証・デバッグをmac上でできます。 下記の記事手順を参考にしてください。 iOS Simulator(iPhone Simulator)をMacにインストールする方法 一度シミュレーターを起動したらアイコンを「Dockに追加」しておくことで次回以降Xcodeを経由せず直接起動できて便利だと思います。 また、ここからは主にエンジニア向けですが、 シミュレータのSafariをmacのSafariでWebデバッグすることが昔はできたのですが、最近のバージョンではできなくなってます。これをできるようにするためにSafariの先行評
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
iOS（Safari）でスクロールバーを常に表示したい...CSSだけでは表示できない！？
スマホ閲覧時に画面からはみ出したテーブル要素などを横スクロールで表示する事がありますが、このスクロールバーを常に表示できないか？という内容です。 以前までのiOSのバージョンならCSSの「-webkit-scrollbar」というプロパティを使うだけで簡単にスクロールバーを常に表示出来たのですが、新しいiOSでは消えてしまうようです。 CSSではダメなのでJavaScript（jQuery）で何とかできないか考えました。 iOS(Safari)でスクロールバーを常に表示するスマホなどの画面が小さいデバイスに対して、テーブル要素などの横長の表のようなコンテンツを表示する時には横スクロールが良く使われます。 表を横にスクロールできることは周知されている動作だとは思いますが、いい感じに画面の端で表がピッタリ切れていると自分で見ても横にスクロールできるのかどうか分からない事があります。 そこでCS
apingが万能だと思ったらそうじゃなかった話
web上で使用するアニメーションは、楽をしてgifで作成していたのですがapingがかなり使えるという記事を発見し、早速使用してみた。 gifは輪郭がなめらかにならなかったり、透過に難ありだったり（アルファチャンネルがサポートされていない？）、色数に制限があったりするため、実際に使用する際はある程度の画質劣化を覚悟した上で使用していたのだが、そういった枷をぶちとばして使用できるのがapngである。 LINEスタンプでもアニメーションのあるものが出ているが、これらもapng形式にて作成されているらしい。 ということで実際に使用してみるとおどろき、データサイズも軽いので今後はapngでいくしかねえ〜と思った。 が、safariで動作チェックをしてみると「画像の色が時たま反転する・色がおかしくなる」という不具合が…。 同様の事象がないかと検索をかけてみたが、特に困っている方のページは出てこず。
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
初めてAPNGを使った時のバグ対応
初めてAPNGを使用したときに起きたバグ？に対応した備忘録です。 APNGとは Animated Portable Network Graphicsの略でアニメーションするPNG画像のこと。 Mozillaによって最初に導入されたファイル形式で、 PNG規格を拡張してアニメーション画像の対応を追加された。 アニメーションGIFと比べて、色数の制限や輪郭のジャギーなど品質面の制限が少ない。 APNGのサポート環境 2022/3月 現在 ほとんどのブラウザでサポートがされてきましたが、IEなどでは使用できません。 実際に起きた現象 APNGを使用してみるとSafariで問題が起きました。 サイトにアクセスした１回目は正常にアニメーションしますが、２回目以降やリロード時にアニメーションが発生しませんでした。 スーパーリロードすれば動いた時もありますが、一般ユーザにスーパーリロードをお願いするわけ
iOS Safari で window.open のポップアップウィンドウを開くようにする : まだプログラマーですが何か？
ブラウザ内で動作するウェブアプリケーションの中で「別ウィンドウで画面を開く」という操作をしたい場合に大きく以下の２つの方法があります： （１）target="_blank" 属性のついた <a> タグをクリック／タップする （２）JavaScript の window.open 関数を実行する より一般的な方法は（１）だと思っています。リンク時に使う <a> タグに target="_blank" という属性を含めておくことで常に新しいブラウザウィンドウを（ブラウザによっては別タブを）開いて、その新ウィンドウの中でリンク先ページが表示されるというものです。比較的簡単に実装できる方法です。 ※ <a> タグの target 属性は本来は「ウィンドウを指定して開く」機能です。例えば <a target="abc" ..> というタグをクリックすると abc という名前のウィンドウを探して（存在
iOSのバージョンと Safariバージョンの対応表(2023/11/9 現在 - Qiita
調べ方 Simulatorまたは実機でSafariを起動する https://aprico-media.com/ua を開く メモる Ref: iOS Safariに関する記事 ・Safari Release Note ・Apple セキュリティアップデート ・Web業界的には、iOS 11.3最大の特徴はSafariでのPWAサポート開始だ！ ↑の記事のように、iOSのマイナーアップデート時にSafariがガラッと変わることがあったりします。 なのでこういったタイミングで、動いていたものが動かなくなったり、動かなかったものが動いたりはあるかもしれません。 （対応表が正しいとすると、Safariバージョンは11.0のままでWebkitのバージョンが変わってるみたいですね）
【iPhone/iPad/Mac】Safariのバージョンを確認する方法
お使いのiPhone・iPad・MacのSafariのバージョンは何ですか？このページはSafariのバージョンの確認する方法をご紹介します。 Safariを使う時に、操作が重っくなったり、エラーになったりする時に、最新版にアップデートしようと思うですが、今使っているSafariは最新のバージョンですか？ App Storeからダウンロードしたアプリなら、設定→一般→iPhoneストレージの順でバージョン情報を確認できますが、SafariはiOSの一部で、ほかのアプリと同じ方法ではSafariのバージョンを確認することができません。 では、本当にiOSのバージョンを確認できる方法はないのですか？そうでもないです。ここでは、iPhone・iPad及びMacの場合からSafariのバージョンを確認する方法をご紹介していきます。 ちょっと面倒な方法かもしれませんが、非常に有用な方法です。 おすす
iOSのSafariのWebインスペクタを使ってみる ｜ Tips Note by TAM
SafariのWebインスペクタ for MAC ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。 ご利用の手順 まず、iPhone側の準備としては以下の通りになります。 ホーム画面から、「設定」→「Safari」を開きます。 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。 次に、PC側の設定。 MacからSafariを立ち上げます。 Safariのメニューから「環境設定」を開きます。 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。 メニューバーに「開発」が追加されていることを確認
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
鹿野 壮 Takeshi Kano on Twitter: "最高だ👏 Safari 16.4が本日リリースし、media queryのrange記法に対応💐 Chrome, Edge, Firefox対応済なので、全ブラウザ対応に🌸 昔 @media (min-width: 600p… https://t.co/3N8dIC70pY"
https://twitter.com/tonkotsuboy_com/status/1640522676308684801
https://twitter.com/clockmaker/status/1640533210940731392
https://twitter.com/makinko/status/1346103710733123605
flex-wrap not working as expected in Safari
https://www.web-development-kb-ja.site/ja/css/safari%E3%81%A7flexwrap%E3%81%8C%E6%9C%9F%E5%BE%85%E3%81%A9%E3%81%8A%E3%82%8A%E3%81%AB%E6%A9%9F%E8%83%BD%E3%81%97%E3%81%AA%E3%81%84/1052136320/
windows.openを使用した時に、iOSのSafariにて別タブでファイルを開けない場合の対処法。
Web ブラウザのポップアップブロック問題
