程序员经验分享-hwhale

PHP，JavaScript - 通过重定向标头来检测屏幕宽度是否正确

2024-01-02

我使用以下 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();
        }
    }

重要的 ：

  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。

UPDATE :由于有些朋友没有明白我的意思，尽管我明确提到我根本不想将内容加载到 DOM 中，所以我在这里给出更清晰的信息......

例如 --- @1200px 我只想显示 1 个侧边栏。 @1600px 我想要显示 2 个侧边栏，超过 1600px 我想要显示 3 个侧边栏。请不要建议媒体查询解决方案，因为我已经知道了，而这正是我不想做的。我想避免将内容加载到 DOM 中。请让焦点仅集中在所提出的问题上。另外，请不要将建议作为答案发布。让其他有正确答案的人去做吧。欢迎在评论区提出建议。

我的问题：

  1. 从 SEO 的角度来看，这是一个好的/正确的方法吗？如果不是为什么？

  2. 我的网址显示为example.com/my-product-category/my-product-name/?width=1440如何去除/?width=1343并仅显示example.com/my-product-category/my-product-name part?


简单的回答，不，从 SEO 的角度来看这不好。或者任何其他立场。像谷歌这样的爬虫被设计成完全忽略所有hidden因此，如果您的内容没有被完全抓取，您将失去重要的 SEO 排名，并且爬虫会伪装成移动设备多次抓取每个网站，以检查该网站是否也适合移动设备。http://www.seonick.net/responsive-design-seo/ http://www.seonick.net/responsive-design-seo/

更不用说如果内容只是隐藏的话，计算 0.5mb 的任意截止点的麻烦就没有任何意义（因为无论如何它都会被发送，因此不会节省带宽）。

您需要使用媒体查询在纯 CSS 中执行此操作，这是最兼容的方式，并且允许流畅的设计（随着窗口大小的调整而随时更改）。

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

如果窗口小于 700px，则将使用一个 css 文件，如果窗口超过，则使用另一个 css 文件。

我更喜欢的另一个方法是使用http://mobiledetect.net/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

php

PHP，JavaScript - 通过重定向标头来检测屏幕宽度是否正确 的相关文章

随机推荐

  • Oracle ojdbc8 12.2.0.1 被 Maven 禁止

    Oracle ojdbc8 12 2 0 1禁止自 2017 年 12 月起由 Maven 提供 在此之前效果良好 Oracle 存储库 setting xml 上的哪些配置已更改 Maven 项目 https github com sgr

  • 使用不同的 JSON 对象填充 ViewPager 中的每个片段，而无需再次加载

    我有一个ViewPager有一个Fragment其中包含一个 GridView仅当我延迟滚动页面并且每次再次从互联网检索内容时 我的代码才能正常工作我想做的只是获取每个页面内容一次并在用户滚动页面时使用它我的问题之一是 JSON 下载sim

  • swift中的dispatch_group_leave崩溃

    这种情况很少发生 这是堆栈跟踪的最后一行 0 libdispatch dylib 0x0000000197a85a9c dispatch group leave 48 dispatch group leave 在一个完整的闭包中被调用 调用

  • 分组时覆盖箱线图中的下限、上限等

    默认情况下 对于下 中和上分位数geom boxplot考虑 25 50 和 75 分位数 这些是从计算得出的y 但可以通过美学参数手动设置lower upper middle 还提供x ymin and ymax和设置stat ident

  • 如何在 jUnit 测试用例中闯入调试器？

    我正在一个大型 java 项目中调试单元测试 我需要运行 ant test 来启动测试套件 所以我很难从 IDE 启动它 如果它附加到任何调试器 是否可以调用 C 中的 Debugger Break 之类的函数来中断调试器 如果我正确理解你

  • 子字符串并返回特定字符后的值

    测试 BSMain 文本 起始页 我想对上面的值进行子串并只返回后面的值 在 VB NET 中 我怎样才能做到这一点 假设没有错误检查 Dim phrase As String Testing BSMain Text Start Page

  • c fscanf 错误检查

    我正在使用 fscanf 从 C 中的文件中读取 我只是想知道我是否正确检查了所有错误条件 这是最可靠的方法 而且我没有遗漏任何内容 FILE fp char filename untitled int count char item1 1

  • Rust 中单元类型的用途是什么？

    铁锈具有单位类型 具有单个零大小值的类型 该单位类型的值也可以使用指定 单位类型及其值的目的是什么 这是一种避免使用的机制吗null or nil 像其他语言一样 是类型的值 它的目的就是无用 Rust 中的一切都是一个表达式 返回 not

  • Zip 文件上传到服务器时损坏

    我的 java 程序将 zip 文件从我的系统上传到 FTP 服务器 uploadfile 是一个包含上传代码的函数 uploadfile 192 168 0 210 muruganp vm4snk home Admin GATE521 L

  • 全日历结束日期错误一天

    我正在制作一个完整的日历支持的汽车预订功能 这是咖啡脚本文件 updateEvent event delta revertFunc gt ajax type PUT dataType json success data gt alert S

  • 声谱图

    我制作了一个应用程序 可以将 FFT 实时绘制到屏幕上 从麦克风 x 轴上的时间 y 轴上的频率和像素的颜色代表幅度 几乎是一个普通的 FFT 频谱图 我的问题是 即使我可以从音乐中看到模式 但也有很多噪音 谷歌搜索我看到人们对振幅应用对数

  • FacesConverter forClass 不适用于复合组件

    我有一个简单的复合组件 它必须呈现输入文本 当输入值并按下命令按钮时 会引发以下异常 java lang IllegalArgumentException Cannot convert 1 of type class java lang S

  • 谷歌翻译：超出配额

    我正在尝试使用 Google Translate REST API 并同时请求以下网址 我收到以下回复 响应 responseData null responseDetails 超出配额 请参见http code google com ap

  • 在 R 数据框中的所有列中搜索值

    这是一个示例数据框 df data frame company c a b c d bond c 0 2 1 0 3 0 equity c 0 7 0 0 5 1 cash c 0 1 0 0 2 0 df company bond equ

  • javascript 中的 obj.length === +obj.length

    在 underscore js 源码中我在很多地方都遇到过 if obj length obj length 有人可以解释一下 他们为什么使用它 这是另一种写作方式if typeof obj length number 他们为什么这样做 谁

  • iPad 上的 Skrollr 截止

    我正在使用 Skrollr 插件 它在桌面上运行良好 但在 iPad 上 我的文档的高度被截断了 我尝试删除所有 skrollr 数据属性 但问题仍然存在 我注意到只需激活插件就会遇到此问题 我尝试启用 禁用forceHeight选项 但问

  • 未找到 Ansible 内部脚本命令

    Ansible name Node package manager npm name pm2 global yes notify restart nginx name start the app script files common pm

  • 通过反射获取命名空间中的所有类型

    C 中如何通过反射获取命名空间中的所有类 以下代码打印指定的类的名称namespace在当前程序集中定义 正如其他人指出的那样 命名空间可以分散在不同的模块之间 因此您需要首先获取程序集列表 string nspace var q from

  • 异步/等待 JQuery 文档就绪

    它适用于document addEventListener DOMContentLoaded async gt 但我很好奇让它与 JQuery 一起工作 而且 我想要使用异步 等待 不承诺因为稍后我将需要承诺回调之外的变量 let prod

  • PHP，JavaScript - 通过重定向标头来检测屏幕宽度是否正确

    我使用以下 JavaScript 来检测屏幕宽度 并通过条件语句将其用作模板文件中的常量 以显示 不显示网站的部分 虽然它与我的问题没有太大关系 但以防万一 是的 我正在使用 WordPress 我也已经在使用 mobileDetect P

热门标签