Question

我创建了一个网站：www.example.com 现在，我正在寻找一种方法来创建本网站的移动版本，而无需放入谷歌图表。我想到了2个选项：

www.example.com将链接到一个PHP脚本，该脚本将检查它是否是移动设备，然后它会将用户重定向到特定端。

例：
移动设备：www.example.com - ＆gt; www.example.com/mobile.html
PC设备：www.example.com - ＆gt; www.example.com/pc.html

如果我是对的，那么消极方面是我的主页将在Google Charts中的2个不同网站中拆分。这将导致我的主页全部下降。

我的第二个选择是PHP脚本不会重定向，而是加载2个不同HTML页面的内容。

例：
移动设备：www.example.com - ＆gt; www.example.com（背景自www.example.com/mobile.html）
PC设备：www.excample.com - ＆gt; www.example.com（背景自www.example.com/pc.html）

负面的方面是每次我想要更改URL时，我必须在htaccess中创建一个新的RewriteRule。我还不确定Google图表在处理加载HTML文件内容的PHP脚本时会如何反应。

我正在寻找您的经验和意见，您更喜欢哪种选择？可能有更好的方法吗？这甚至是解决这个问题的好方法吗？请给我你的建议。

Answer 1

不要使用这些建议中的任何一个，因为有多种原因，例如您提到的难度，维护两个网站，这些建议很糟糕。

您应该研究响应式设计，有许多框架可供您抽象概念，但极端基础是：

旧的无响应网站：

// CSS
.container {
    margin-left: 300px;
}

// HTML
<div class="container">
    <h1>Hello world</h1>
</div>

这只适用于某个屏幕尺寸，如果您在移动设备上观看，或者在非常大的显示器上观看，那么它看起来并不好看。当您开始在容器内嵌套其他具有特定像素宽度/高度的设计元素时，这会呈指数级变差。

新的响应式网站：

// CSS
.container {
    margin-left: 20%;
}

// HTML
<div class="container">
    <h1>Hello world</h1>
</div>

如果你调整浏览器的大小，或者在移动设备上查看它，那么它总是看起来一样。如果您使用百分比，则页面将根据您的设备调整大小。

这是基础知识，对响应式设计进行一些研究，你可以为非常小的屏幕做更高级的事情，比如特定的布局，例如移动设备

我建议调试bootstrap，这是初学者进入响应式设计的一个很好的框架。

Google与PHP重定向的互动

1 个答案: