移动友好的网站

Question

我是一名网站开发人员，没有开发移动友好网站的经验。

当我们开发一个适合移动设备的网站时，我们是否需要为移动版创建单独的文件？或者我们可以使用我们为桌面版创建的相同文件吗？

Answer 1

我建议您使用一个具有响应式设计的文件集。 有不同的方法可以做到这一点。

1）您可以使用bootstrap。

2）我有时会做的是使用css @media。请查看this链接。

Answer 2

如果你要开发像flipkart，ebay或facebook那样的大型网站，那么你可以更好地分开移动版本，因为这类网站需要更多的时间来加载手机。您只需在手机中显示相关内容。

如果是一个简单的网站，最好使用Bootstrap。

Answer 3

你可以让一个文件启动另一个，或者有一个大的怪物文件。

How to detect Safari, Chrome, IE, Firefox and Opera browser?

但我认为这可能更符合您的需求。

Answer 4

这就是我做的。它只适合我的设计。我的页面看起来像一个博客页面。左边的DIV是主要内容。然后我用小DIV盒子跟着广告。主要DIV是40em宽。并且每边有4em的边缘。总计48em = 768个设备像素。

所以，我在每个页面添加了以下元指令：

    <meta content="width=768" name="viewport">

除了文字太小外，它很好地获取了智能手机上的页面。广告向下滑动到底部。接下来，我去了我的CSS文件。在那里，我用＆＃39; para＆＃39;格式化我的常规文本。类：

.para {font-size:1.2em;line-height:140%;font-family:arial,helvetica,sans-serif;color:#333}
@media only screen and (max-width: 768px) {.para{font-size:2em;}}

上面是PC，@ media是手机。请注意，我将文本大小增加到2em，屏幕宽度仅为768px。

这一切都通过了Google Mobile Friendly测试。您可以查看我的网站： Read source-code of this和test it here。

注意：我一直在改变我的工作。这个网站可能会在几天内消失。

祝你好运。