Question

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

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

有没有办法让平板电脑缩小到整页，同时仍然可以将手机按比例调整到其大小？

这就是我所拥有的......将初始比例改为.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" />

Answer 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;
  }
}

仅限手机的视口

1 个答案: