C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Safariで再ログイン時にレイアウトが崩れる

[トピック内 4 記事 (1 - 4 表示)]  << 0 >>

■96734 / inTopicNo.1)  Safariで再ログイン時にレイアウトが崩れる
  
□投稿者/ simano (16回)-(2021/01/18(Mon) 20:07:15)

分類:[HTML/CSS] 

こんにちは。

iPadのSafariで表示しているWeb画面で、次のような現象に悩まされています。(iPad Pro 14.3, .Net Framework 4.7.2, ASP.NET)

Web画面は、左右にコンテンツがあり、
左側にあるコンテンツのWidthを固定値、右側にあるコンテンツのWidthを「100%から左側コンテンツを引いた幅」を指定しています。

初めて表示した時や、更新ボタン押下時は、左右のコンテンツは指定した幅で表示されます。

しかし、iPadに再ログインした時に、Web画面の左側コンテンツが自動的に拡大表示されてしまい、
右側コンテンツの幅が狭くなり、レイアウトが崩れる現象が起きます。


cssの幅指定している箇所などを見直したのですが、
同じ設定でも再現する時としない時があるようで、なかなか問題が特定できません。

viewportタグは次のように指定しています。
"width=device-width, initial-scale=1.0"

このような問題を防ぐ方法や、iPadで拡大表示が行われるパターンなど、ヒントがあれば、お知恵をお借りできないでしょうか。

---css---
body {
    margin: 0 auto;
    padding: 0 0 0 0;
    background-color: gray;
    width: 1280px;
}

#page_content {
    display: flex;
}

#page_left {
    width: 400px;
    padding: 0px;
    margin-right: 6px;
    background-color: lightblue;
}

#page_right {
    width: calc(100% - 400px - 6px);
    padding: 0px;
    background-color: lightgreen;
}
---
---aspx---
<body>
    <form id="form1" runat="server">
        <div id="page_content">
            <section id="page_left">
				...
            </section>
            <section id="page_right">
				...
    		</section>
        </div>
  </form>
</body>
---

引用返信 編集キー/
■96735 / inTopicNo.2)  Re[1]: Safariで再ログイン時にレイアウトが崩れる
□投稿者/ simano (17回)-(2021/01/18(Mon) 20:36:02)
自己レスです。
上記の内容を見直していて、もしかしてと思い、右側コンテンツの幅に固定値を指定しましたが、
現象は変わりませんでした。
引用返信 編集キー/
■96825 / inTopicNo.3)  Re[2]: Safariで再ログイン時にレイアウトが崩れる
□投稿者/ simano (18回)-(2021/02/16(Tue) 18:01:05)
色々と試しまして、拡大される原因は、CSSの指定ではないかもしれないと考えています。

Web画面上で連続してボタンをタッチしていると、時々、ボタンからClickイベントが発生しないことがあり、
この時にボタンをダブルタッチすると、再びClickイベントが発生するようになります。

⇒その後に、iPadに再ログインすると、Web画面の左上が拡大表示されます。


このことから、問題は2点あると思っています。
1. iPad上で連続してボタンをタッチした時に、Clickイベントが発生しない場合がある。
2. ダブルタッチすると、iPadに再ログインした時に、Web画面の左上が拡大表示される。
  (bodyに"touch-action: manipulation;"を指定していますが、それでもこの場合は拡大表示されます)

1については、下記のように、clickやtouchendイベントに"passive:true"を指定することで、
イベント処理が速くなり、頻度を下げることができました。

document.addEventListener("touchend", function () { }, { passive: true });

ただ、それでもまだ発生するため、問題解決できていません。


Chromeでは上記の問題は発生しません。
(ただ、Chromeでは、最初からWeb画面全体がSafariよりも大きく表示されます。
やはりCSSの指定に何か問題があるのでしょうか…?)

思い当たることや、こういう時に良い調査方法があれば、ご教授いただけないでしょうか。

引用返信 編集キー/
■96855 / inTopicNo.4)  Re[3]: Safariで再ログイン時にレイアウトが崩れる
□投稿者/ simano (19回)-(2021/02/19(Fri) 11:45:16)
現象を解決できました。

上記のような現象は、ASP.NETを使っていない単純なhtmlページでも発生しました。
このため、プログラムではなくて、Safariの動作自体が原因だと思っています。

■発生条件
・ラジオボタンが複数並んでいるhtmlページで、iPadからログアウトする。
・iPadに再ログインして、並んでいる最後のラジオボタンをタッチすると固まる。
 ダブルタッチするとラジオボタンが押せるようなるが、次に再ログインした時に拡大表示される。
(iPadからログアウトせずに、Webブラウザを最小化した時も、同じ現象が起きます)


■修正方法
再ログインした時やWebブラウザを最大化した時に、orientationchangeイベントが呼ばれます。
このイベントの内部で、コンテンツをロードするようにしたところ、現象が解決しました。
---
window.onorientationchange = function () {
window.location.href = window.location.href
}
---

原因がCSSにあると思い込んでいたため、なかなか解決できませんでした。
ありがとうございました!

解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ