我需要通过JS检测IOS设备的设备,对于iphone-6我通过比率和devicePixelRatio检查它,我没有找到任何信息来检查设备是否是iPhone 7 plus.
我找到了旧设备的信息,
iPhone6和iPhone 6 Plus的设备宽度css视口大小是多少
或这个
我对iPhone 6 plus上的box shadow属性有显示问题.如果我添加元标记width=device-width,则根本不显示以下框阴影:
-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8;
box-shadow: 1px 1px 5px 5px #a8a8a8;
如果我不使用元标记,如果放大页面,框形阴影"神奇地"消失.你可以在这里理解这一点:
http://jsfiddle.net/b6aaq57z/3/
这似乎是一个特定的iPhone 6加错误.在运行相同iOS版本(8.0.2)的旧版iPhone上,框阴影正常工作.
有人有解决方案吗？
我正在本地开发我的网站,并使用Chrome进行预览.虽然调整浏览器大小以测试使用的媒体查询非常容易max/min-width,但我无法max/min-device-width通过任何内置设置进行模拟.是否有Chrome扩展程序可以模拟移动设备并触发媒体查询,具体而言max/min-device-width也是如此orientation:portrait/landscape？
我基本上想用某种方法在我的计算机而不是智能手机上使用Chrome测试此媒体查询:
@media only screen and (max-device-width: 600px) and (orientation: portrait)
css google-chrome google-chrome-extension media-queries device-width
我已经建立了十几个响应式网站,从未遇到过这个问题.基本上,我正在使用宽度=设备宽度的视口的元标记,但iPhone和Android设备仍在缩放.出于某种原因,我在Windows手机上没有这个问题.
这是头部html的摘录:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
这是主包装器的HTML(注意最外层的div是从jquery.mobile添加的:
<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >
<div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
<div class="container">
</div>
</div>
</body>
这是主要的包装CSS:
html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}
body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; …我读到的每个地方,Ipad 1上的屏幕宽度都是1024 x 768.
我使用bootstrap构建了一个站点,并且在我的iPad上以横向模式查看站点时出现可折叠导航按钮.它不应该.它应仅出现在宽度小于1024px的视口中.
然后,当jQuery看到它使用$(window).width()时,我嗅出了宽度.它只报告768px x 467px;
我有以下metatag:
meta name ="viewport"content ="width = device-width"
我知道这听起来很奇怪，但确实有一个原因，而且这符合用户的最大利益。我知道让浏览器自动最大化并设置为100％可能会出现问题，但是如何进行设置，以使如果窗口未最大化且缩放比例未达到100％，所有用户将看到一条消息“请最大化您的窗口并设置放大到100％”。我需要至少在Chrome，Firefox和IE中使此工作。
我不是试图使其成为“全屏模式”，而是最大化窗口。
如果在“保持” 100％和最大窗口的意义上“强制”是有问题的，将缩放比例设置为100％并在初始加载时最大化窗口会怎么样？