如何解决问题4.4.2 Android版本不支持css3?

时间:2017-01-25 10:20:19

标签: javascript android css3

有谁知道Android App版本是否不支持CSS3 flex box?当我在Application中运行代码时它工作正常,但是当涉及我的Android版本4.4.2设备时,它不起作用。

https://i.stack.imgur.com/qML0E.jpg

以下是代码:

[Ext.define('MobileUnity.component.PassCode', {

      -
            extend: 'Ext.Container',
            xtype: 'passcode',

            config: {

                html: \[

                    '<div id="pin">',
                      '<div class="dots">',

                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',
                        '<div class="txtBox"><div class="dot" style="margin: 5px;"></div></div>',

                      '</div>',
                      // '<p>Enter the password</p>',
                      '<div class="numbers">',

                        '<div class="number selectNo" >1</div>',
                        '<div class="number selectNo" >2</div>',
                        '<div class="number selectNo" >3</div>',
                        '<div class="number selectNo" >4</div>',
                        '<div class="number selectNo" >5</div>',
                        '<div class="number selectNo" >6</div>',
                        '<div class="number selectNo" >7</div>',
                        '<div class="number selectNo" >8</div>',
                        '<div class="number selectNo" >9</div>',

                        '<div class="number selectNone fa fa-check"></div>',
                        '<div class="number selectNo">0</div>',
                        // '<div class="number fa fa-close"></div>',
                        '<div class="number selectDel fa fa-arrow-left"></div>',

                      '</div>',
                    '</div>'

                \].join('')

            }
             });]

的CSS:

#pin {
    margin: auto;   color: #555; }

.dots {   /*width: 50%;*/   display: -webkit-box;   display:
-webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-justify-content: space-around;   -ms-flex-pack: distribute;   justify-content: space-around;   padding: 1em 4em;   /*padding-top: 3em;*/

}

.dot {
    position: relative;
    background: transparent;

    border-radius: 5vw;
    border: 2px solid #fff;
    width: 5vw;
    height: 5vw;
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
    transform: scale3d(0.7, 0.7, 0.7);.
    -webkit-flex: 1; }

.dot.active {   -webkit-animation: growDot .5s ease;   animation: growDot .5s ease;   -webkit-animation-fill-mode: forwards;   animation-fill-mode: forwards; }

.dot.wrong {   -webkit-animation: wrong .9s ease;   animation: wrong .9s ease; }

.dot.correct {   -webkit-animation: correct .9s ease;   animation: correct .9s ease; }

.dot.ac-gold {   -webkit-animation: bg-gold .5s ease;   animation: bg-gold .5s ease; }

#pin p { font-size: .8em; }

.numbers {   display: -webkit-box;   display: -webkit-flex;   display:
-ms-flexbox;   display: flex;   -webkit-flex-flow: row wrap;   -ms-flex-flow: row wrap;   flex-flow: row wrap;   -webkit-box-align: center;   -webkit-align-items: center;   -ms-flex-align: center;   align-items: center;   -webkit-justify-content: space-around;  
-ms-flex-pack: distribute;   justify-content: space-around;   -webkit-align-content: flex-end;   -ms-flex-line-pack: end;   align-content: flex-end;   margin: 0vw 8vw;   /*margin: 3vw 8vw;*/   /*margin: 2em 0;*/ }

.number {
    position: relative;
    width: 22vw;
    height: 18vw;
    margin: 2vw;
    border-radius: 18vw;
    /*border: 2px solid #0066BB;*/
     /*border: 2px solid rgba(255, 255, 255, 0); */
     border: 2px solid #b0aca8;
    text-align: center;
    line-height: 18vw;
    font-weight: 400;
    font-size: 7vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .5s ease;
    transition: all .5s ease; }

0 个答案:

没有答案