【发布时间】:2015-01-15 13:36:18
【问题描述】:
我使用 Bootstrap 3 和媒体查询创建了一个网站。 这是我使用移动优先方法的基本 .css 媒体查询设置。
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
此外,我在 index.html 中有这个用于移动视口优化的元集:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
在调整我的浏览器 chrome 和 firefox 的大小时,所有断点都按预期工作。 对于移动设备,无论是纵向还是横向,都会显示移动版本。 但是在三星 Galaxy Tab 和 Ipad 上测试网站时,我只得到了完整的网站。
会不会是我为平板电脑使用了错误的断点?或者是其他东西?我很困惑..因为它可以在移动设备和浏览器中运行!
【问题讨论】:
标签: twitter-bootstrap-3 media-queries breakpoints tablet