在复杂的布局上，大量使用媒体查询会影响性能，因为移动浏览器仍会加载所有隐藏的元素。
据我现在所知，要在适当的时候（屏幕大小/设备）加载适当的布局/内容，我们应该使用javascript。
我正在开发一个模板，当屏幕宽度小于1080px时，该模板应该变成移动版本。要做到这一点，我想把现代化结合起来。mq具有调整大小事件侦听器。
你知道更好的方法吗？
迄今为止，我的modernizr代码：http://jsfiddle.net/c4BcR/
动态加载内容并调整事件大小
1 个回复
最合适的回答,由SO网友:gmazzap 整理而成
记住PHP（wordpress）在服务器上运行，javascript在浏览器上运行。
因此，您的意图是：
加载站点的url（GET请求发送到服务器）
enquire.js 以及您的脚本enquire.register 材料enquire.js 识别分辨率并运行js函数enquire.js 运行ajax调用（这是对服务器的第二个请求）对于每个页面加载，您运行2个服务器请求，而不是一个服务器请求。在第一个请求中，您需要一些脚本（inquire.js、inquire.register脚本、jquery或模板脚本），这些脚本在页面中不起任何作用，唯一的作用是加载内容，即使jquery或模板脚本很快，从服务器输出的静态html总是显示得更快，你做了大量的工作来优化移动设备的站点，并有机会获得opposite 后果
此工作流可用于站点的小部分，而不是整个内容。至少对我来说不是。
对我来说，如果那样的话，我会
为每个模板文件创建3个版本，例如。page.php | page-tablet.php | page-phone.php 或header.php | header-tablet.php | header-phone.php 依此类推，在init上，使用服务器检测方法，如Mobile Detect 要嗅探当前设备，请将其放入静态变量类或常量中，并为template_include 附加的筛选器"-{$device}" 到所需的每个模板。（例如，如果需要“page.php”，则如果当前设备是平板电脑，则返回“page tablet.php”）
$device 全局可访问变量，在模板文件use中注册与设备相关的js脚本get_header($device) 而不是get_header() 就像get_footer($device), get_sidebar($device). 同时使用get_template_part(\'part\', $device) 而不是get_template_part(\'part\') 等等每页一个请求，而不是两个，每个设备加载自己的内容，html输出被要求发送给服务器而不是客户端，这对性能有好处，对于小部分，您可以使用enquire.js 方法并使用一些媒体查询对所有内容进行调整。E、 g.对于平板电脑，您可以使用相同的台式机模板enquire.js + 如果分辨率超过某个断点，ajax将添加一些内容。
在我看来，与wordpress合作是获得网站移动优化版本的最佳方式。
结束