PHP，JavaScript-通过重定向标头检测屏幕宽度是否正确 [英] PHP, JavaScript - Is it right to detect screen-width by redirecting header

问题描述

我正在使用以下JavaScript来检测屏幕宽度，并通过条件语句将其用作模板文件中的常量，以显示/不显示网站的某些部分.虽然与我的问题无关，但以防万一...是的，我正在使用WordPress.另外，我已经在使用mobiledetect PHP库.

  function getLayoutWidth(){如果(isset($ _ GET ['width'])){define("SCREEN_WIDTH"，$ _GET ['width']);} 别的 {回声< script language ='javascript'> \ n";echo"location.href = \" $ {_ SERVER ['SCRIPT_NAME']}?$ {_ SERVER ['QUERY_STRING']}.& width = \" + screen.width; \ n;回声</脚本> \ n";出口();}} 

重要提示:

1. 其他技术类似……假设我的网站大小为2MB，它仍然会加载2MB的内容，然后使用之类的CSS属性在移动设备上隐藏1.5MB的内容.> display:none; 而我不希望该模板部分自行加载，因此不需要隐藏任何内容.

2. 我不想加载整个JavaScript库(例如jQuery等)，因为 location.href = \"$ {_ SERVER ['SCRIPT_NAME']}?$$ __ SERVER ['QUERY_STRING']}".& width = \" + screen.width; 是我整个网站中唯一的JavaScript.其余的一切都是基于纯PHP，HTML和CSS的.我什至在前端模板中禁用了WordPress的jQuery.

更新:尽管我清楚地提到我根本不希望将内容加载到DOM中，但是有些朋友没有理解我的意思，因此我在这里提供了更多的清晰度.....

例如--- @ 1200px我只希望显示1个侧边栏.@ 1600px我希望显示2个补充工具栏，超过1600px我希望显示3个补充工具栏.请不要建议我已经知道的Media Queries解决方案，而这正是我不想做的事情.我想避免将内容加载到DOM中.请仅将重点仅放在所提出的问题上.另外，请不要发布建议作为答案.让其他有适当答案的人去做.请在评论"部分中发布建议.

我的问题:

1. 从SEO角度来看，这是一种好方法吗?如果不是为什么?

2. 我的URL显示为 example.com/my-product-category/my-product-name/?width=1440 如何删除/?width = 1343 并仅显示 example.com/my-product-category/my-product-name 部分?

解决方案

简单的答案，不，从SEO的角度来看并不好.或任何其他观点.诸如Google之类的抓取工具旨在完全忽略所有 hidden 元素，因此，如果您的内容没有得到完全抓取，您将失去大量的SEO排名，并且抓取工具多次伪装成移动设备来爬网每个网站，以检查是否该网站也适合移动设备. http://www.seonick.net/sensitive-design-seo/

更何况，如果仅隐藏内容，则计算0.5mb任意截止点的麻烦就没有用了(因为无论如何都发送了所有内容，因此不节省带宽).

您需要使用媒体查询在纯CSS中执行此操作，这是最兼容的方式，并且可以进行流畅的设计(随窗口大小的变化而变化.

 < link rel ="stylesheet" media =(最大宽度:700像素)" href ="mobile.css">< link rel ="stylesheet" media =(最小宽度:700像素)" 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>这是正常内容，将在所有设备上可见<?PHP if(！$ detect-> isMobile()){?>此内容仅对桌面用户可见，实际上，它甚至不会传输给移动用户，因此不在DOM中<?PHP}?></body> 

I am using the following JavaScript to detect the screen-width and use it as a constant across my template files through conditional statements to display / not-display portions of my site. While it has nothing much to do with my questions, but just in case... Yes I am using WordPress. Also I am already using mobiledetect PHP Library.

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();
        }
    }

Important :

1. Other techniques are like...... Let's assume if my site is 2MB in size, it will still load 2MB of content and then hide 1.5MB of it on mobile devices by using CSS properties like display:none; Whereas I don't want that template part to load itself, thus not needing to hide anything.

2. I am not looking to load an entire JavaScript library like jQuery or so to do this because location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; is the only JavaScript in my entire site. Rest everything is pure PHP, HTML and CSS based. I even disabled jQuery of WordPress in the front-end template.

UPDATE : Since some friends did not get my point although I mentioned clearly that I don't want to load the content into DOM at all, I am giving a bit more clarity here.....

For Example --- @1200px I want only 1 Sidebar to be displayed. @1600px I want 2 Sidebars to be displayed and over 1600px I want 3 Sidebars to be displayed. Please don't suggest Media Queries solutions as I already know it and that is exactly what I don't want to do. I want to avoid loading the content into DOM. Kindly let focus be only and only on questions asked. Also please don't post suggestions as answers. Let others with proper answers do it. Kindly post suggestions in Comment section.

My questions :

1. Is this a good / correct way to do from SEO stand point? If not why?

2. My URL is displayed as example.com/my-product-category/my-product-name/?width=1440 How to remove /?width=1343 and display just example.com/my-product-category/my-product-name part?

解决方案

Simple answer, no, it is not good from a SEO standpoint. Or any other standpoint. Crawlers such as Googles are designed to completely ignore all hidden elements and thus you will lose big time SEO ranking if your content isnt getting fully crawled, and crawlers crawl each site multiple times masquerading as mobile devices to check if the site is mobile friendly as well. http://www.seonick.net/responsive-design-seo/

Not to mention the trouble of calculating your arbitrary cutoff point of .5mb serves no purpose if the content is merely hidden (since its all getting sent anyway thus saving no bandwidth).

You need to do this in pure CSS using media queries, it is the most compatible way and allows for a fluid design (changes on the go as the window resizes.

<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 700px)" href="full.css">

That will use one css file if the window is smaller than 700px and the other if it is over.

Another of my more favorite methods is to use the http://mobiledetect.net/ class. Its small and fast, more accurate and better flexibility. Load that class then just add classes to your body element depending on the visitors browser

<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">

Then style by targeting classes inside body.phone. This method also ensures you know if the browser is mobile BEFORE the DOM starts to process, meaning you can serve compressed versions of images through some simple logic rather than having CSS swap them out or just resize them or omit entire parts of the markup from being sent to the user at all ensure bandwidth is only used for parts of the DOM relevant to the users device.

<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>

这篇关于PHP，JavaScript-通过重定向标头检测屏幕宽度是否正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！