仅适用于手机的视口答案

【问题标题】：Viewport for phones only仅适用于手机的视口
【发布时间】：2013-06-22 14:43:32
【问题描述】：

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

就 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" />

【问题讨论】：

最大比例对于可用性来说很糟糕。不要这样做。让用户根据需要进行缩放。

标签： html css mobile media-queries

【解决方案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;
  }
}

【讨论】：