ウェブの技術とか開発環境構築の覚書。
iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。
いろいろ試しましたが、行き着いた回避策は2つ
いずれかでした。
“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む
window.close()が効かないバグは
2014年11月のiOS 8.1.1アップデートで無事に修正されていました。
以下は、～8.1.0 時点の記事です。
iOS 8.0.x 8.1.0 のSafariでは
開いているタブを閉じるwindow.close()が使用できないバグがあります。
調査してみたところ、どうやら
window.close()の使い方がマズイのではなく
iOS8のSafariが現時点でこの機能に対応していない旨のやり取りがされていました。
参考：
javascript – window.close() doesn't work on iOS 8 GM seed – Stack Overflow
（Appleのデベロッパーフォーラムは、アカウントがないと見られないので、とりあえずこちらへリンク）
今できる対応策は
同一ウィンドウ内での遷移で代用できるところは
バグ修正がアップデートされるまで、別窓遷移をやめることくらいでしょうか。
iOS 8.0は、他にも致命的なバグを見つけちゃってるので
2014年10月20日のiOS8.1アップデートで修正されてないか期待していたのですが
残念ながらほとんど直っていませんでした orz
たとえば、テキストボックス関連でこんなバグがあります。
iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
（ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…）
以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが
ピンチイン（アウト）での拡大縮小は許可したまま
iPhone（iPad）でフォームにforcusしたときズームしないようにする方法もありました！
サンプル
※iPhoneでひらくと動作を確認できます
<a href="http://demos seroquel 50 mg.jquerymobile.com/1.4.3/panel/”>jQuery mobileのPanelのpushのよう
本文が横スライドしてメニューがせり出してくるナビがついたウェブサイトに
スクロールに追従して画面の下へ固定表示するボタンを追加しようとしたら…
iPhoneで全く追従してくれない。
iPhoneやChromeでiposition: fixed; が効いてくれない場合は
-webkit-transform: translate… を併せて設定しているか親要素に設定していないか確認してみてください。
“iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない” の続きを読む
overflow でスクロールを許可してから -webkit-overflow-scrolling を設定すると
スマートフォンの画面からはみ出すコンテンツを、部分的に慣性スクロールするよう設定できます。
-webkit-overflow-scrollingの値をtouchにすると慣性スクロールできるようになり、autoにすると慣性スクロールを無効にできます。
Androidは慣性スクロールが効いていなかったので、-webkit-overflow-scrolling: auto; と同じ動作をします。
画面幅よりも横長なスペック表と、利用規約を模したサンプルを作ってみました。
“スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling” の続きを読む
ChromeのAndroid USBデバッグをつかうと、パソコン版Chromeのデベロッパーツールの要領でUSBケーブルでつないだAndroid端末のChromeのデバッグが行えますが
AdobeのEdge Inspect（エッジインスペクト）を使うと、これと同様にAndroidやiPhoneのデフォルトブラウザのデバッグを行えます。
Edge Inspectでデバッグするために必要な構成はこちら
CSSのfont-familyで指定するとき、軽くつまずくのがフォント名の綴り…
よく使う、ヒラギノ角ゴ やメイリオは、前に設定した時のをコピーしてくればいいですが
iPhoneやiPadの内蔵フォントを使うとなると、使えるフォントとfont-familyで指定する綴りをどうやって調べたらよいのか。
画面が回転したときに何かさせたいときはorientationchangeで設定できます。
※Androidは2.2から対応しました。2.1の端末では動きません。
$(window).on(“orientationchange”,function(){
alert("画面が回転しました"); // ここに実行したい処理を書く
});
回転したときだけ実行する場合は、これでいけますが
ページ読み込み直後にも処理を実行したい場合だったら、
resizeもセットで設定します。
$(window).on(“orientationchange resize”,function(){
alert("この端末の横幅は"+window.innerWidth+"pxです");
});
“iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize” の続きを読む