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”の続きを読む

Windowsパソコンの開発環境復元レポート(前半)

新しいWindows PCへ開発環境を復元の続きです。

むちゃくちゃ長くなったので、まずは「10.JAVA」までをレポート!
グワッ!…とややこしくなるサーバ系は次回で。

  1. パソコンを初期化
  2. セキュリティ系
  3. Windowsのフォルダオプション
  4. IME、テキストエディタ
  5. ブラウザ
  6. メール、チャット
  7. SCP
  8. Microsoft Office
  9. Adobe系
  10. JAVA
  11. バージョン管理系
  12. Apache
  13. PHP
  14. Ruby

“Windowsパソコンの開発環境復元レポート(前半)”の続きを読む

新しいWindows PCへ開発環境を復元

オフィス移転してから、会社の開発機がしょっちゅう強制終了を繰り返しているのですが
ブルースクリーンの内容やビープ音3回から、ハード的な問題の可能性が浮上…

運んでくるときに物理的な衝撃があったか、ケース内のホコリが移動でかき回されて発症したのかなぁ。
メモリはケース内のホコリや熱でダメになることがあるみたいです。

そんなわけで、今の開発環境一式をおさらいする良い機会だったので
別のパソコンへ環境を再構築したものをまとめてみました。

長くなるので、この記事では主だった構成とバックアップの内容を
次回以降Windowsパソコンの開発環境復元レポートWindowsパソコンの開発環境復元レポート(後半)で、手順やつまづいたポイントなどをまとめてみます。

“新しいWindows PCへ開発環境を復元”の続きを読む

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が効かなくなるバグ”の続きを読む

Adobe Edge Inspectでスマートフォンブラウザのデバッグ

ChromeのAndroid USBデバッグをつかうと、パソコン版Chromeのデベロッパーツールの要領でUSBケーブルでつないだAndroid端末のChromeのデバッグが行えますが
AdobeのEdge Inspect(エッジインスペクト)を使うと、これと同様にAndroidやiPhoneのデフォルトブラウザのデバッグを行えます。

Edge Inspectでデバッグするために必要な構成はこちら

  • パソコンとスマートフォンがともに接続できる無線LANのネットワーク
  • パソコンのGoogle Chrome
  • Edge Inspectのパソコン用アプリケーション(無償)
  • Edge Inspectのスマートフォン用アプリケーション(無償)
  • Bonjour(パソコンがMac OS X以上の場合はもともと有効)

“Adobe Edge Inspectでスマートフォンブラウザのデバッグ”の続きを読む

Xperia SX(SO-05D)をAndroid 4.1にバージョンアップしてみた

Xperia SX(SO-05D)が、2013年7月2日にAndroid 4.1 OSバージョンアップできるようになったのでさっそく試してみました。

Xperia™ GX SO-04D / Xperia™ SX SO-05D[Android 4.1 OSバージョンアップ]| ソニーモバイルコミュニケーションズ

テーマが増えたり、メニューのUIが変わったりと大きなアップデートなので
以前、PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題でとりあげたデフォルトブラウザも挙動が変わったか確かめてみました。

…変わってた!
画面端のスワイプでタブを切り替える機能がなくなってます。
したがって、画面端に置いたボタンをタップできなくなる問題も解消しています。
よかった。これでひとつ心配のタネがへりました。

PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題

スマートフォンの機種依存でひっかかったのでメモ。

スマートフォンのスワイプ操作にも柔軟に対応できるフォトギャラリーjavascriptのPHOTO SWIPE
Xperia SX(型番:SO-05D)の相性があまりよくない。

スワイプしまくったり、ページ送りしまくったり
乱暴に操作したらブラウザが強制終了してしまう。

“PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題”の続きを読む