to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

Androidタブレットで発生するカルーセルの機種依存事例

こんにちは、x-fit開発スタッフの高島です。

今回は、一部のAndroidタブレットで発生した機種依存のトラブル事例を紹介します。

見つかった現象

Carousel(またはRotateCarousel)と、Justifyというx-fitオリジナルのタッチUI部品を連携させた場合に発生する現象です。

Justifyで3つの画像を並べ、それをCarouselに3セット分取り込んでいます。スワイプしていくと、Justifyが1セットずつ表示されるコンテンツです。

正常な状態

正常な状態のCarouselとJustifyの組み合わせレイアウト画像

機種名:iPad

iPadで見たときは以下のような状態で、3画像1セットが整然と並んで表示されます。

Androidタブレットでの正常な見え方画像

ソース

<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-06CF-01DSony Tablet SSC-02D(GALAXY Tab 7.0 Plus)ETBW11AA

今回発生した現象です。

トラブル事例のCarouselとJustifyの組み合わせレイアウト画像

上記のAndroidタブレットで見ると、改行されたかのようにJustify1セットが縦に並んで表示されます。

Androidタブレットで発生したトラブル事例画像

細かく調査していくと、フロートさせているブロック要素の幅をjQueryで取得すると値が不正になる、ということが判明しました。

回避策

Justifyをdivタグで囲うことでこの現象は発生しなくなりました。

まとめ

スマートフォンブラウザにおけるJavaScriptの処理は、予期しないことが見つかります。x-fit部品の実機検証の過程で見つかる機種依存事例を、今後も紹介していきます。お役に立てば幸いです。

このエントリーをはてなブックマークに追加