你如何设计为移动设备构建的网站？

Question

好的，现在大多数现代智能手机的分辨率为720p或1080p。这意味着即使屏幕尺寸像4英寸一样小，我们仍然可以在第一次在Galaxy s3中打开它时看到整个网站的所有文字，gui（如电子邮件文本框）。

但是，虽然我们可以在移动浏览器中看到非常小的电子邮件文本框，但它对我们来说太小了，无法输入数据。所以我们需要放大页面，这非常耗时。

所以，这是我打算做的，但我觉得很奇怪。

我将创建一个像普通网站mydomain.com这样的网站，但该网站上的按钮和文字非常大。 例如： CSS

.myNormalMobileFont{
    font-size: 500%;
}

.myNormalLargeFont{
    font-size: 700%;
 }

下图显示无论我在移动设备还是桌面上打开我的网站，它都会是这样的

还有一件事，当我在手机中打开一些文章页面时，我看到他们有一个移动网络版本，但我从未在普通的桌面浏览器上找到这些移动版本？

他们放置移动网络的位置？

我的移动网站可以用作普通的桌面网站，但按钮和文字会非常大。

有人可以解释一下吗？

Answer 1

只要您设置了正确的元标记，您实际上并不需要像这样指定字体大小。 例如：

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

设置视口的比例。

我建议您将HTML上传到服务器并通过手机访问它们并在那里玩游戏。这是最好的学习方式

关于您在哪里可以找到移动网络的问题，这取决于网站 1）有时网站是响应式的（您可以从桌面访问网站，调整浏览器大小并观察其更改）即：https://www.foxtel.com.au/got/login.html
2）但有时候他们有专门的移动网站，比如facebook - ＆gt; https://m.facebook.com/