我正在使用响应式设计技术为一个新网站设置主题，并且主要使用 CSS 媒体查询，这效果非常好。然而，在某些情况下，我需要获取浏览器的宽度，我通过添加 <html> 来实现这一点。带有 JQuery 的这个漂亮位的类:
(function($) {
//add drupal 7 specific code
Drupal.behaviors.getWidthTheme = {
attach: function(context, settings) {
//end drupal calls
var w, html = $('html'), _window = $(window);
_window.resize(onResize);
function onResize() {
w = _window.width();
if (w >= 310 && w < 480 ) html.addClass('mobile-320').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-480');
else if (w >= 481 && w < 768 ) html.addClass('mobile-480').removeClass('mobile-768').removeClass('desktop').removeClass('mobile-320');
else if ( w >= 768 && w < 960 ) html.addClass('mobile-768').removeClass('mobile-480').removeClass('desktop').removeClass('mobile-320');
else html.addClass('desktop').removeClass('mobile-480').removeClass('mobile-768').removeClass('mobile-320');
}
onResize();
}}})(jQuery);
上面的代码将一个类注入(inject) <html>元素，例如<html class="mobile-320">等等...取决于浏览器或设备的宽度。
我想做的是获取该类并以某种方式将其转换为 PHP 变量，这样我就可以关闭一些代码。理想情况下，它应该是这样的:
<?php if ($mobile-320): ?>
<!--do something-->
<?php else : ?>
<?php if ($mobile-480 || $mobile-768 || $desktop): ?>
<!-- do some other thing -->
<?php endif; ?>
理想情况下，这些类是从已呈现的 HTML 类中获取的。但是，我不确定这是否可行，因为 PHP 需要在服务器上呈现，而我通过 JQuery 注入(inject) HTML 类。我基本上对任何方式都持开放态度，不是按照我上面的方式进行设置，但希望你能明白。
最佳答案
我不太确定我是否理解，但也许您可以发起另一个 ajax 请求，发送您刚刚插入的类的名称。 php 的响应可以是 json-data 来控制下一步需要执行的内容，也可以直接是 html/javascript。这将有助于查看更多 html/javascript 内容。
$.getJSON('getDeviceActions.php',
{ className: $('html').attr('class') },
function(phpResult){
if( phpResult.switchOffA == true ) $('.divsel').hide(); //or what not
}
});
为什么不能直接在 JavaScript 中执行 switch 语句而不询问服务器，之后它将如何处理该信息？
关于php - 获取主体类元素并将其转换为 PHP 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9439866/