JavaScriptがiPhoneでのみ正常に動作しない
GitHub Pagesで以下のサイトを制作しました。 https://imaimai17468.github.io/Products/CreditsCounterforKNCT/ 正常な動作の場合、「特別学修」タブを開くと、一般の特別学修と専門系の特別学修のタブがあり、それを開くとその一覧表が表示されます。また、特別学修タブの下には教科一覧の表があります。 しかしスマホで見ると、特別学修タブを開いてもそこからほかのタブが表示されなかったり、その下の教科の一覧表が表示されないことがあります。 なぜスマホの場合のみ正常に機能しないのでしょうか？ 本来は、html上で <div class="tokubetu_hogehoge"></div> <div id="sikaku_hogehoge"></div> となっているところにjsでclass名やid名を読み取って表を展開するような仕組みにな
Windows で Safari のブラウザテストをする - FirstLayout
Playwright を使用Windows でも Safari のブラウザテストができます。正確には、WebKit ブラウザでサイトを開けます。 使用するのは、Microsoft が開発している Playwright です。 Playwright は、主に E2E テストの自動化などで使用します。ただ、OS に関係なく Chromium、Firefox、WebKit のブラウザでサイトを開くこともできます。 この記事は Test Your Site In Every Browser を参考にし、試したことを書いています。詳しい説明は、元記事をご覧ください。YouTube での解説もあります。 やり方Windows で Safari のブラウザテストを開始するまで、全部で 6 ステップあります。早ければ 2 ~ 3 分で終わります。 2 回目以降は、6 ステップ目だけでテストができます。 ス
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう！
iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall viewport heightの略だと思います。 これを使えば先ほどのアドレスバーなどの分はみ出てしまう、などは解決します。が作成するサイトにもよりますが大きいviewportの時は注意が必要ですね。 『lvh』について 『lvh』はつまるところvhと同じような挙動をすると解釈していただいて大丈夫です。 たぶんLarg
ios上のブラウザ(safari,chrome)での表示がおかしいです
ios 14.2のchrome version87.0.4280.77とsafari(最新)で、以下のindex.htmlを表示させたところ 本来であれば、４つの正方格子が表示されるところ、高さ方向が潰れて表示されます。 なお、pcのほとんどのブラウザでは、意図した表示になっております。 サイトにもアップしておきます。 https://atxrtc.firebaseapp.com/ おわかりになる方、おしえてください。 以上、よろしくおねがいします。 ------------------- index.html ------------------- <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> <m
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
iOS一部バージョンのSafariで高さを取得するときに気を付けたいこと｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは、ウェブラボクリエイターズメモです。 今回は、iOSの古いバージョンで表示検証をする際に気を付けておきたいことを備忘録として残します。 スマホでグローバルナビゲーションをハンバーガーメニューとして表示させることはよく使われる手法かと思います。 その際にメニュー内のコンテンツが多いと、スマホ画面の高さを超えてしまうことがあります。 画面の高さを取得し、それを超えたらスワイプ操作でスクロールできるようにするといった対応が可能ですが、iOS一部バージョンのSafariでは、jQueryによる高さの取得が上手くいかないことがあるようです。 検証したバージョン 当記事では「iOS12.1.2」「iOS11.3」「iOS11.2」のバージョンを用いて検証し、 「iOS11.3」「iOS11.2」で表示不具合を確認しました。 また今回、こちらの記事を参考にさせていただきましたところ、 古いiO
Safariでローカルの開発環境でだけAjax(fetch)がCORSエラーになる件
ローカル環境（WSL）に構築した開発用サイト（http://192.168.1.xx:8000/ 的なの）をデバッグしていたんだけど、なぜか iOS の Safari でだけ場所の検索機能（OpenStreetMap の APIを使って地名から場所を取得する機能）が使えない。 PC や Android だと普通に動くほか、iOS でも本番サーバーだとうまく動く。 macOS の Safari でも同様の症状で、Web インスペクタで調べたらコンソールに 「Cross-origin redirection to https://nominatim.openstreetmap.org/search?format=json&limit=1&q=%E5%8C%97%E5%8D%83%E4%BD%8F denied by Cross-Origin Resource Sharing policy: O
最近の CSRF 対策ってなにがいいんだろう : (*x).b=z->a+y/c
◆ Sec-Fetch での判断が良さそうだったけど Safari は未対応らしい ◆ Safari に対応させるならその他の方法 ◆ 作るもの次第で楽なものを使う これまでやってた方法これまで CSRF 対策にはトークンを使ってました 私の場合は フォームでの POST は一切しなくて fetch での送信のみです body に混ぜるよりは header に入れるほうが楽なのでヘッダーで送信します トークンはユーザまたは Cookie に対して乱数で発行して リクエスト時に送信されたトークンがユーザや Cookie のトークンと一致することを確認しています ヘッダーを見るならトークンは必要なかったこの方法って過剰だったようです fetch を使ったバックグラウンドでの通信の場合は ヘッダーで任意のデータを送信できますが フォームからではできません 標準でないヘッダーが送信されていることを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
