ウェブの技術とか開発環境構築の覚書。
iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。
いろいろ試しましたが、行き着いた回避策は2つ
いずれかでした。
“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む
フォームにフォーカスしている間だけループで任意の処理を実行し続けるJavascriptを作りました。
スマートフォンの、日本語入力中リアルタイム文字カウントなどに使えます。
ver1.7以上のjQueryが必要です。
absoluteで絶対位置配置した要素のサイズを相対指定の応用で
YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。
スマートフォンやレスポンシブ対応のときに役立ちます。
2014年以降、レスポンシブデザインが増えてきたので
Wordpressの表示や動作の確認も、開発しているパソコンのブラウザだけでなくスマートフォンやタブレットなど多岐にわたるようになりました。
そんなとき、スマホサイトを作りながらiPhoneで確認する方法のようにすると
ローカルネットワーク内の様々な端末で表示や動作の確認ができるのですが
localhostに構築しているWordpressでは、このような現象がおこる事があります。
外部CSSなどの参照ファイルが参照できなくなる症状は
Wordpress自身のアドレスが127.0.0.1やlocalhostになっていると
localhost上のWordpress見ている外部のスマートフォンが、自身ののlocalhost上へリンク先ページや外部参照ファイルを探しに行ってしまうためおこる現象なので
WordPress管理画面の一般設定で、「WordPress アドレス (URL)」「サイトアドレス (URL)」をローカルIPに書き換えれば
外部端末からでも正しいアドレスを参照できるようになります。
スマートフォン用に、全角文字の場合は1文字、半角文字の場合は0.5文字でカウントして制限文字数をもうけるJavascriptを作りました。
ver1.7以上のjQueryが必要です。
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; が効かない” の続きを読む
iOS6のSafariから対応の、HTML5のFileReaderをつかって
スマートフォンのカメラを起動し、撮影した画像を
<input type=”file”>へセットしたり
<img>としてプレビューしたりするサンプルを作ってみました。
Xperia acro（Android2.3）の機種依存バグを発見したのでメモ。
Xperia acroでは
htmlやbodyに、はみ出した部分を非表示とする
overflow:hidden;
を設定すると、一切スクロールができなくなります。
最初は、Androidでスクロールできなくなるバグだとおもい
iframeやdisplay:none;を探してみたのですが、該当するところがなく
javascriptをまるごと非適用、CSSをまるごと非適用…など試しているうちに
htmlに適用しているoverflow:hidden;と
bodyに適用しているoverflow:hidden;を両方とも無効にすると
スクロールできるようになることが判明。
GALAXY SII(Android2.3)やGALAXY SIII(Android4.1)、Xperia A(Android4.2)ではおこらないので
Xperia acro特有の症状のよう。
overflow でスクロールを許可してから -webkit-overflow-scrolling を設定すると
スマートフォンの画面からはみ出すコンテンツを、部分的に慣性スクロールするよう設定できます。
-webkit-overflow-scrollingの値をtouchにすると慣性スクロールできるようになり、autoにすると慣性スクロールを無効にできます。
Androidは慣性スクロールが効いていなかったので、-webkit-overflow-scrolling: auto; と同じ動作をします。
画面幅よりも横長なスペック表と、利用規約を模したサンプルを作ってみました。
“スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling” の続きを読む