只制作基于移动的网站

Question

我不那么困惑，使一个网站只为移动和平板电脑，而不是一个桌面。我只需要知道一件事。

1. 我应该使用<meta name="viewport" content="width=device-width, initial-scale=1">并为特定设备定义@media only screen吗？

Answer 1

是的，但是您的网站仍然可以从其他设备访问，我可以为您解释：

使用标签：

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

它将调整网页宽度以匹配设备宽度，并将初始缩放设置为1(没有缩放)。例如，如果您使用iPad打开此页面，则web浏览将显示1024x768 (横向)或768x1024 (纵向)的页面。

initial-scale=1

这将强制显示网页的缩放设置为1。

使用媒体查询CSS3，您可以为不同的设备设置不同的CSS样式：

片剂的样式

@media screen and (min-width: 768px) and (max-width: 1024px) {

   /* Styles for tablets */
 }

用于桌面的样式

@media screen and (min-width: 1025px) and (max-width: 1280px) {

   /* Styles for Desktops */
 }