只制作基于手机的网站

Question

我并不太困惑，只为移动和平板电脑制作网站，而不是桌面。我只需要知道一件事。

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

Answer 1

是的，但你的网站仍然会从其他devices.I入店可以解释为你：

使用标签：

<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 */ 
}