javascript - 检测移动语法

Question

我想为手机显示略有不同的内容/布局，所以我使用 PHP/Javascript 设置了一个标志:

<script type="text/javascript">

  if (screen.width <= 700) 
  {
  "<?php $mob=1; ?>";
  }

</script>

但这似乎不起作用，语法是否正确？

谢谢。

Answer 1

您需要了解客户端 和服务器 之间的区别。

您的 JavaScript 代码正在客户端 上运行。到那时，您的 PHP 代码已经完成运行，生成发送到浏览器的输出。

例如，这是发生的事情:

1. 浏览器向服务器发送请求
2. 服务器运行您的 PHP 代码以生成响应
3. 响应发送到浏览器
4. 浏览器呈现响应并运行它包含的任何 JavaScript

因此您的 JavaScript 代码不能直接设置 PHP 变量。

有关客户端与服务器的更多信息，请参见 this question and its answers .

如果您需要知道 PHP 代码中的屏幕分辨率，this question and its answers tell you why you can't do that and what to do instead .

但理想情况下，让您的 PHP 提供内容，然后使用 CSS 媒体查询来选择如何在较小的页面尺寸上对其进行格式化(包括是否隐藏其中的一些内容):

@media screen and (max-width: 700px) {
    /* These rules only apply when display (vs. printing, etc.)
       on a page with a width of 700px or less
    */
}

这样做的一个优点是它是动态的:如果用户将他们的移动设备重新调整为横向模式并且现在宽度超过 700 像素，您的内容将以更大的格式显示，而无需从服务器重新请求。类似地，在桌面上，如果有人从 1000 像素宽的窗口开始，然后将其缩小到 600 像素，您的内容将进行调整，同样无需重新请求服务器。 (您可能知道，但这被称为“响应式设计”。)