0

我正在尝试制作一个只有手机视图和普通视图的响应式布局（即平板电脑应该正常加载页面）。

就 CSS 而言，一切都正常工作，但是当平板电脑处于纵向模式时，视口会搞砸平板电脑的缩放。（它们被放大到像素宽度）

有没有办法让平板电脑缩小到整个页面，同时仍然让手机负载缩放到它们的大小？

这就是我所拥有的...将初始比例更改为 0.75 几乎可以工作，但是 iPhone 在横向时会加载正常站点，这是我不想要的。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 568px)" href="css/mobile-styles.css" />
4

1 回答 1

1

不要弄乱视口，它只会导致头痛和可访问性问题。相反，为手机（小屏幕）创建所需的 CSS，然后在min-width:500px（或其他断点）媒体查询中包含“完整”站点（大屏幕）的样式。

示例 CSS：

/*this will fire for any size screen*/
nav{
  width:100%;
}

/*this changes the above styles for any screen over 500px*/
@media (min-width:500px){
  nav{
    width:50%;
    float:left;
  }
}
于 2013-06-25T17:35:55.257 回答