我使用以下JavaScript来检测屏幕宽度,并通过条件语句将其用作模板文件中的常量,以显示/不显示我网站的部分内容.虽然它与我的问题没什么关系,但为了以防万一...是的,我正在使用WordPress.此外,我已经在使用mobiledetect PHP库.
function getLayoutWidth() {
if (isset($_GET['width'])) {
define( "SCREEN_WIDTH", $_GET['width']);
} else {
echo "<script language='javascript'>\n";
echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width;\n";
echo "</script>\n";
exit();
}
}
重要:
其他技术就像......我们假设我的网站大小为2MB,它仍会加载2MB的内容,然后使用CSS属性隐藏1.5MB的内容,比如display:none;我不想要那个模板部分加载自己,因此不需要隐藏任何东西.
我不打算像jQuery那样加载整个JavaScript库,因为它location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width;是我整个站点中唯一的JavaScript.休息一切都是纯PHP,HTML和CSS为基础.我甚至在前端模板中禁用了WordPress的jQuery.
更新: 由于一些朋友没有明白我的观点,虽然我已经清楚地提到我根本不想将内容加载到DOM中,但我在这里给出了更多的清晰度.....
例如--- @ 1200px我只想显示1个侧边栏.@ 1600px我想要显示2个侧边栏并且超过1600px我想要显示3个侧边栏.请不要建议我已经知道的媒体查询解决方案,这正是我不想做的事情.我想避免将内容加载到DOM中.请注意,只关注问题.另外请不要将建议作为答案发布.让其他人有正确的答案.请在评论部分发表建议.
我的问题:
从SEO的角度来看,这是一个很好/正确的方法吗？如果不是为什么？
我的URL显示为example.com/my-product-category/my-product-name/?width=1440如何删除/?width=1343和显示example.com/my-product-category/my-product-name部分？
简单的答案,不,从SEO的角度来看,它并不好.或任何其他立场.像谷歌这样的爬虫被设计为完全忽略所有hidden元素,因此如果您的内容没有被完全抓取,您将失去大量的SEO排名,并且爬虫会多次抓取每个网站伪装成移动设备以检查该网站是否也适合移动设备.
http://www.seonick.net/responsive-design-seo/
更不用说计算你的任意截止点为.5mb的麻烦是没有用的,如果内容只是隐藏(因为它总是被发送,因此无需带宽).
您需要使用媒体查询在纯CSS中执行此操作,它是最兼容的方式,并允许流畅的设计(随着窗口调整大小,随时随地进行更改).
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 700px)" href="full.css">
如果窗口小于700px,那将使用一个css文件,如果窗口小于700px,则使用另一个css文件.
我最喜欢的另一种方法是使用http://mobiledetect.net/类.它小巧,快速,更准确,更灵活.加载该类然后根据访问者浏览器添加类到body元素
<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">
然后通过内部类定位样式body.phone.此方法还可以确保您在DOM开始处理之前知道浏览器是否是移动的,这意味着您可以通过一些简单的逻辑来提供压缩版本的图像,而不是让CSS交换它们,或者只是调整它们的大小或省略标记的整个部分.完全发送给用户确保带宽仅用于与用户设备相关的DOM的部分.
<body>
This is normal content and will be visible to all devices
<?PHP if (!$detect->isMobile()) { ?>
This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM
<?PHP } ?>
</body>