localhostで構築中のWordPressをWi-Fi接続したスマートフォンで確認

2014年以降、レスポンシブデザインが増えてきたので
Wordpressの表示や動作の確認も、開発しているパソコンのブラウザだけでなくスマートフォンやタブレットなど多岐にわたるようになりました。

そんなとき、スマホサイトを作りながらiPhoneで確認する方法のようにすると
ローカルネットワーク内の様々な端末で表示や動作の確認ができるのですが
localhostに構築しているWordpressでは、このような現象がおこる事があります。

  • トップページのHTMLだけが表示でき、リンク先のページは「接続できません」となる
  • 外部CSSやJavascriptが読み込めていない

WordPressのアドレスはlocalhostではなくローカルIPにする

外部CSSなどの参照ファイルが参照できなくなる症状は
Wordpress自身のアドレスが127.0.0.1localhostになっていると
localhost上のWordpress見ている外部のスマートフォンが、自身ののlocalhost上へリンク先ページや外部参照ファイルを探しに行ってしまうためおこる現象なので

WordPress管理画面の一般設定で、「WordPress アドレス (URL)」「サイトアドレス (URL)」をローカルIPに書き換えれば
外部端末からでも正しいアドレスを参照できるようになります。

拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

iOSのSafariには、
フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという
ありがた迷惑な独自仕様があります。
(ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…)

以前、この現象を回避する方法として
viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが

ピンチイン(アウト)での拡大縮小は許可したまま
iPhone(iPad)でフォームにforcusしたときズームしないようにする方法もありました!

サンプル
※iPhoneでひらくと動作を確認できます

“拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする”の続きを読む

iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない

<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; が効かない”の続きを読む

スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット

iOS6のSafariから対応の、HTML5のFileReaderをつかって
スマートフォンのカメラを起動し、撮影した画像を
<input type=”file”>へセットしたり
<img>としてプレビューしたりするサンプルを作ってみました。

サンプル

“スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット”の続きを読む

Xperia acro でスクロールできなくなるCSS

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特有の症状のよう。

スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling

overflow でスクロールを許可してから -webkit-overflow-scrolling を設定すると
スマートフォンの画面からはみ出すコンテンツを、部分的に慣性スクロールするよう設定できます。
-webkit-overflow-scrollingの値をtouchにすると慣性スクロールできるようになり、autoにすると慣性スクロールを無効にできます。

Androidは慣性スクロールが効いていなかったので、-webkit-overflow-scrolling: auto; と同じ動作をします。

画面幅よりも横長なスペック表と、利用規約を模したサンプルを作ってみました。

サンプル

“スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling”の続きを読む

Android2.2と2.3でtransform:rotateが効かなくなるバグ

CSS3の tranform:rotateをつかうと、要素をすきな角度に傾けられますが
Android 2.2 と 2.3 では、user-scalable=noとposition:fixedがそろうと、これが効かなくなるバグがあります。

  • metaタグのviewportで、ピンチイン・ピンチアウトでのズームイン・ズームアウトを禁止するuser-scalable=noを設定
  • 親要素に、固定配置のposition:fixed; を設定している

たとえば、こんなふうに画面の下端に矢印つきのボタンをつけるスタイルなんかがバグの影響をうけます。

“Android2.2と2.3でtransform:rotateが効かなくなるバグ”の続きを読む