Question

使用materialize datepicker时，我一直面临着一个问题，即datepicker不会占据屏幕的中心，而这个代码适用于Android设备，这不适用于物理iPhone设备。

任何帮助将不胜感激。

以下是代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
    name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <title>Kidzania Ticket Booking</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.css" />
    </head>
    <body>
    <form role="form">
    <div class="formGroup">
    <input type="text" class="datepicker" />
    </div>
    </form>
    <script src="assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
    </body>
    <script>
    $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year,
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    closeOnSelect: false // Close upon selecting a date,
    });
    </script>
    </html>

Answer 1

您可以使用媒体查询来检测设备宽度，然后将日期选择器的父元素居中

void cleanup()
{
    SDL_DestroyTexture(texture);
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
}

<强>更新：我查看了他们的网站，发现原因是在日期选择器的焦点上，如果你用手指在iPhone上缩小，页面会放大一点，你可以看到它仍然是中心

如果您想要禁用此行为，可以在此处找到答案：

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

将此添加到html的头部为我工作

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 


.datepicker{

        /* STYLES GO HERE */

  }
}

更新2

似乎这也是一个很好的解决方法： https://stackoverflow.com/a/6394497/4447199

物化数据选择器不会出现在iphone屏幕的中心

1 个答案: