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 | ios で position:absolute top: 50% がずれる
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
【iOS】iOS Safariでposition:fixedを使ってoverlayするとスクロール時に下のレイヤーが見える - UGA Boxxx
iOS15からSafariでは画面下部にナビゲーションがつくようになった このナビゲーションはスクロールの方向によって大きさが変わる position:fixedを使って高さいっぱいの手前にoverlayするモーダルをつくる場合、大きい方のナビゲーションが表示されている状態でスクロールさせると、モーダルの高さがナビゲーションの縮小に追随できず下に隙間ができてしまう そして、スクロールが終わると急に吸着する挙動になる iOSの仕様というかバグというか、これに付き合わなければならないみたい 対策 いろいろ調べた結果、モーダル表示時に以下のスタイルをあてるととりあえず回避できる bodyタグにposition: fixed; overflow: hidden; inset: 0px; ※スクロール位置を保持したい場合は、topを調整する htmlタグにheight: 100vh; まず、1. は
jQueryの.offset() を使うとiPhoneやiPadでずれるバグを解消したい - ハリーかつき・旧技術ブログ
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります 改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetId01').offset(); var y = offset.top; scrollTo(0,y); }); });改善後 $('.anc').click(function(e){ e.preventDefault(); var y = document.getElementById('targetId01').offsetTop; scrollTo(0,y); }); });
iOS16で画面回転できないときの対応 - Qiita
はじめに 久しぶりにQiitaで投稿。 やはり書きやすい✨ 普段は動画再生機能を持ったアプリを開発しており、YouTube(下記スクショ)などにも見られる全画面切り替えボタンで縦画面と横画面が切り替わる仕様です。 本記事では、iOS16で画面回転できない問題に遭遇した(iOS15までは正常にできていた)ので対応をメモ程度に残しておきます。 縦画面と横画面の切り替え 今までどうしていたかと言うと、縦画面と横画面の切り替えボタンがタップされたときに、以下のように強制的に画面を回転していました。 @objc private func tappedRotateButton(_ sender: UIButton) { UIDevice.current.setValue(orientation.rawValue, forKey: "orientation") } iOS16では、UIDevice.or
iOS一部バージョンのSafariで高さを取得するときに気を付けたいこと｜クリエイターブログ｜東京都新宿区のWeb制作会社 - ウェブラボ
こんにちは、ウェブラボクリエイターズメモです。 今回は、iOSの古いバージョンで表示検証をする際に気を付けておきたいことを備忘録として残します。 スマホでグローバルナビゲーションをハンバーガーメニューとして表示させることはよく使われる手法かと思います。 その際にメニュー内のコンテンツが多いと、スマホ画面の高さを超えてしまうことがあります。 画面の高さを取得し、それを超えたらスワイプ操作でスクロールできるようにするといった対応が可能ですが、iOS一部バージョンのSafariでは、jQueryによる高さの取得が上手くいかないことがあるようです。 検証したバージョン 当記事では「iOS12.1.2」「iOS11.3」「iOS11.2」のバージョンを用いて検証し、 「iOS11.3」「iOS11.2」で表示不具合を確認しました。 また今回、こちらの記事を参考にさせていただきましたところ、 古いiO
Javascript/jQuery でブラウザ高さを取得する方法 | WWWクリエイターズ
この記事では、３つのJavascript関数による高さの取得方法をまとめていきます。 とりわけ、モバイル環境における、ブラウザー（iOS Safari や Chrome）での高さの取得方法、ややトリッキーです。 詳しく見ていきます。 Javacscript でブラウザーの高さを取得 ブラウザーのウィンドウに高さをフィットさせるには、下記の２種類のアプローチがあります。 [A] Javascriptでウィンドウ高さを取得して、所望の要素を高さにぴったりフィットさせる[B] （Javascriptを使わずに）CSSでぴったりフィットさせる 今回、Javascript、もしくは、JQueryでの高さの方法を詳しく見ていきます。 ブラウザウィンドウの高さの取得 ブラウザーウィンドウの高さは、Javascript のdocumentオブジェクトのプロパティから、もしくは、jQueryを使って取得でき
iOSでは$(window).height() と window.innerHeight の値は違うらしい
スクロール位置によって発火する系のアクションを仕込んだページで、どうもiPadだけ位置がズレる。スマホは専用のアクションにしてあるから問題ないんだけども、iPadはいわゆるPCサイズと同じレイアウト／アクションにしてある。 なんか数値が合わないんですけど 本来であれば、ページの一番下まで行くと $(document).height() === $(window).height() + $(window).scrollTop() これが成り立つはずなんだけど、合わない。。なんで。 PCだとバッチリ合うのに、当たり前だけど。 最初はあんまり理解できていないviewportの問題かなーなんて思ってたけど違った。 WEMO スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ こちらのサイトではwindow.innerWidth / window.innerHeightは
iPadやAndroid Tabletでheight: 100%;が効かない
PCだとheight:100%;が意図した形で効いているのに、iPadやAndroid Tabletでは効かない現象に遭遇したのでメモ。 サンプルコード display: flex;で横並びにして、その中で高さを揃えるようにしてみます。 HTML <ul class="parent"> <li class="item"> <div class="children">テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト<br>テスト<br>テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト<br>テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト</d
お絵かき掲示板をiPadで使いやすくするために｜さとぴあ
iPad対応のお絵かき掲示板しぃの愛称で呼ばれてきたお絵かき掲示板、PaintBBSはHTML5になって帰ってきました。 iOS、iPad OS対応です。右クリックの代わりになる「右」ボタンもあります。 ツールパレットが右にあるから右手があたるしかし、ちょっと困った事になりました。iPadを買っていざお絵かき掲示板で描くぞ～と思っていた方が…描きにくくて使えないかも…となってしまいました。 何が問題だったのでしょうか？ ツールパレットが右側にあるので、右手がツールにあたって誤動作していたのです。液晶タブレット、iPadで絵を描く時は誤動作防止用の小指をカードする手袋をする事も多いようですが…。 ツールの位置が右にあるから右手があたる。だったら左に移動すればいいのでは？ 右左どちらでも好きな位置へツールパレットは右…。お絵かき掲示板を知っている方ならこのレイアウトが見慣れた画面の筈ですが…。
iPadでお絵かき掲示板｜さとぴあ
PaintBBS NEOはHTML5で作られたしぃお絵かき掲示板のクローンです。 見た目と動作が同じになるようにしぃちゃんとは別の作者の方が1から新しく作り直しました。 対応環境 Chrome/FireFox/Safari/Edge（最近のバージョンのみ） iOS(Mobile Safari) iOS対応です。iPadで描く事ができるお絵かき掲示板です。 PCでは右クリックでスポイトやマスクの操作をします。しかしモバイル端末には右クリックがないのでそのかわりになる「右ボタン」があります。 JavaアプレットのオリジナルのPaintBBSはブラウザの拡大率をあげてもキャンバスの周囲が大きくなるだけです。 1920x1080のフルHD環境では24インチモニターでもUIが小さくて操作が大変です。 しかし、NEOはHTML5なのでブラウザの拡大率をあげればUIもキャンバスも大きくなります。 iPa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/ankokunoteatime/status/1650453038954614785
Mobile Safari $(window).height() URL bar discrepancy
XCode 11 Canvas does not rotate fo… | Apple Developer Forums
ミミニャ～ on Twitter
ミミニャ～ on Twitter: "@satopian iPad・・・ どう考えてもWindows PCの方がハイスペックなのに謎ですね(´・ω・`) appleは昔から大嫌いです(´・ω・`)"
ミミニャ～ on Twitter: "あの描き難そうなスマホの類いで絵を描くほど描くのが好きなら、安い中古のでもPC買えば、スマホの類いより中古PCの方が安いまであるし、俄然快適になるんじゃない？とか思うけど、最近の人がPC買う動機って何なんだろうね。ちなみに私はレンタルしてきたCDをMP3にしたくてPC買った。"
さとぴあ on Twitter