如何根据屏幕分辨率发送完全不同的HTML内容


How to send totally different HTML content based on screen resolution?

我需要根据屏幕分辨率向客户端发送单独的内容。

在这一刻,所有的内容都传递到页面index.php,通过CSS我显示或不显示我想要的部分。

缺点是:页面的整个内容总是传递给客户端。只是显示改变了。这增加了手机的流量,却没有任何好处。

我的目标是能够,总是调用index.php,真正根据分辨率提供不同的HTML内容,这样,移动设备的流量可以大大减少(在我的情况下是一个列表和10个CSS行,而不是JS的色调,不同的CSS等等),而对于桌面,它只发送他们真正需要显示的

是否有可能这样做,使用PHP/JS,并在同一时间,是谷歌SEO兼容?

您可以嗅探用户代理字符串以尝试确定用户是否在移动设备上,然后以这种方式返回不同的内容,但要注意它并不总是准确的。

为了避免自己检测所有类型的设备,你可以使用Mobile_Detect或类似的东西。

$detect = new Mobile_Detect;
if ($detect->isMobile() && !$detect->isTablet()) {
    // all mobile devices excluding tablets (i.e. phones)
    include('phone_template.php');
} else if($detect->isTablet()) {
    // all tablets
    include('tablet_template.php');
} else {
    // everything else
    include('desktop_template.php');
}

同样,这是基于用户代理字符串工作的,这是可欺骗的(地狱chrome允许您在开发人员工具中测试不同的屏幕尺寸)。

它不会完美,但它可能会让你通过。