2013年7月29日月曜日

mobile safariでjqueryのliveが効かない

正しく設定しても、どうしてもliveが効かず、ボタンが反応しない、ということがありました。

しばらく試行錯誤した後、ググってみたら2秒で解決しました。

http://aqubiblog.blogspot.jp/2011/04/jqueryliveiphonesafari.html?m=1

該当要素に「onlick=""」を追加すれば動くようになるということです。驚きの解決方法。

これで問題なく動作するようになりましたが、思わず脱力してしまいました。

2013年7月10日水曜日

ユーザーエージェント「Serf」の大量アクセス

GoogleAnalyticsを見てたら「Serf」というブラウザ名で大量アクセスがあることに気がつきました。

Apacheのログを見てみたところ、「Serf」のユーザーエージェントは「Serf/1.1.0 mod_pagespeed/1.4.26.3-3101」となっています。

ここまで見てだいたい察しがつきました。先日興味本位で導入した「mod_pagespeed」の仕業でした。

携帯用GoogleAnalyticsはimgタグでga.phpを呼び出しているのですが、それが影響していたようです。


対処法はここに書いてあります。

https://developers.google.com/speed/pagespeed/module/faq

とりあえず /etc/httpd/conf.d/pagespeed.conf に

ModPagespeedDisallow "*/ga.php*"

を追記。

# service httpd configtest

で確認して問題なかったので、そのままhttpdを再起動しました。

翌日analyticsを確認したところSerfのアクセスは記録されなくなっていました。
平和が戻りました。

2013年7月6日土曜日

display:tableが便利

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>


floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。


さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>








中央





各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/


気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。

2013年7月5日金曜日

iphone、androidの幅固定ページ用viewport設定

500ピクセル幅固定のページをiphone、androidで最適化表示するために色々調べ、試しました。

最終的に以下に落ち着きました。
できればiphoneもandroidも共通のviewportにしたかったんですが、無理っぽかったのでユーザーエージェントで分けました。

<?php if(preg_match("/Android/", $_SERVER["HTTP_USER_AGENT"])): ?>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=500px, initial-scale=1.0, user-scalable=yes">
<?php else: ?>
  <meta name="viewport" content="width=500px">
<?php endif; ?>


iphoneは「width=500px」を指定するだけでOKです。

問題はandroidです。
「width=500px」だけだと、まず最初にブラウザデフォルトのサイズでページをレンダリングし、ページをすべて読み込んだ"後に"widthを500pxに変更する、という仕様になってるようです。

一回読み込んだ後変更するので、文字の改行位置が変わったりして、ページがカクカク動いてしまいます。

そこで登場するのが「target-densitydpi=device-dpi」。
このandroid独自の属性を指定することで、表示が最適化されます。


とりあえずこれで問題は解決。iphoneでもandroidでもビシっと表示がキマるようになりました。


とは言ってもやはりスマホページは固定幅は不向きです。特にandroidは変な動きが多いです。

ユーザビリティのことを考えても、スマホに最適化したページを作ったほうが、間違いなく良いです。


参考ページ
http://www.tasuhiku.com/tips/214

Androidブラウザの「パソコンサイト表示」のユーザーエージェント

スマホはHTC EVO 3D(ISW12HT)を使ってます。

Androidブラウザのユーザーエージェントはこんな感じです。

Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; ISW12HT Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

androidブラウザの設定で「パソコンサイト表示」というのがあります。

Screenshot_2013-07-04-09-02-24

これをチェックした状態でユーザーエージェントを見ると、以下になりました。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24

見ての通り、Chromeに変わりました。


これは今自分が使ってるChromeのユーザーエージェント。OSとバージョン以外は全く同じです。

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36