Androidタブレットで発生するカルーセルの機種依存事例
公開日:
こんにちは、x-fit開発スタッフの高島です。
今回は、一部のAndroidタブレットで発生した機種依存のトラブル事例を紹介します。
見つかった現象
Carousel(またはRotateCarousel)と、Justifyというx-fitオリジナルのタッチUI部品を連携させた場合に発生する現象です。
Justifyで3つの画像を並べ、それをCarouselに3セット分取り込んでいます。スワイプしていくと、Justifyが1セットずつ表示されるコンテンツです。
正常な状態
機種名:iPad
iPadで見たときは以下のような状態で、3画像1セットが整然と並んで表示されます。
ソース
<carousel view-vwidth="100%" view-hwidth="100%" class="carousel" view-class="view" inner-class="inner"> <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%" x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%"> <item src="img/sample_1.png" /> <item src="img/sample_1.png" /> <item src="img/sample_1.png" /> </justify> <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%" x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%"> <item src="img/sample_2.png" /> <item src="img/sample_2.png" /> <item src="img/sample_2.png" /> </justify> <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%" x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%"> <item src="img/sample_3.png" /> <item src="img/sample_3.png" /> <item src="img/sample_3.png" /> </justify> <viewpoint x-on-class="on" x-off-class="off" div-class="point"></viewpoint> </carousel>
機種依存の事例
発生した機種名: L-06C、F-01D、Sony Tablet S、SC-02D(GALAXY Tab 7.0 Plus)、ETBW11AA
今回発生した現象です。
上記のAndroidタブレットで見ると、改行されたかのようにJustify1セットが縦に並んで表示されます。
細かく調査していくと、フロートさせているブロック要素の幅をjQueryで取得すると値が不正になる、ということが判明しました。
回避策
Justifyをdivタグで囲うことでこの現象は発生しなくなりました。
まとめ
スマートフォンブラウザにおけるJavaScriptの処理は、予期しないことが見つかります。x-fit部品の実機検証の過程で見つかる機種依存事例を、今後も紹介していきます。お役に立てば幸いです。