Css 物化数据选择器并没有出现在iphone的屏幕中央_Css_Iphone_Datepicker_Materialize

Css 物化数据选择器并没有出现在iphone的屏幕中央

css iphone

Css 物化数据选择器并没有出现在iphone的屏幕中央,css,iphone,datepicker,materialize,Css,Iphone,Datepicker,Materialize,在使用materialize datepicker时，我遇到了一个问题，datepicker无法占据屏幕中央，而这段代码在android设备上工作，但在物理iPhone设备上不工作任何帮助都将不胜感激代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible"

在使用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>


Kidzania机票预订
$（'.datepicker'）.pickadate({
selectMonths:true，//创建一个下拉列表来控制月份
selectYears:15，//创建一个15年的下拉列表来控制年份，
今天:"今天",，
清除：“清除”，
结束：'好'，
closeOnSelect:false//选择日期后关闭，
});

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

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


.datepicker{

        /* STYLES GO HERE */

  }
}

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

如果要禁用此行为，请在此处找到答案：

把这个添加到html的头上对我来说很有用

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

更新2

似乎这也是一个很好的解决方法：

我尝试了媒体查询，但它不起作用，请您提供CSST。该元标记解决方案不起作用，我在阅读了线程中的其他答案后，将字体大小设置为16px，谢谢你的指导，你能更新答案，列出字体大小的解决方案吗？这样我就可以把它标记为已接受了answer@MadamalaVJ我添加了对您有效的答案链接。但是我为我的场景选择了元标记解决方案，因为在我的网站上，这对于所有输入都是一个问题。我没有删除它，因此它可能在其他方面帮助其他人：）