如何在 Wordpress 上检测基于设备的 HTML 代码？

Posted 2023-03-06

【中文标题】如何在 Wordpress 上检测基于设备的 HTML 代码？

【英文标题】：How to detect HTML code based on device on Wordpress?

【发布时间】：2019-10-18 10:52:28

【问题描述】：

我没有 html 方面的经验，并试图在 WordPress 上为自己制作一个小型网站。

我有以下自定义代码可以在我的网站上播放视频：

<video poster="video poster link" controls="controls"  >
<source src="video link" type="video/mp4"></video>

视频播放器在桌面站点中完美显示。然而，当 WordPress 为平板电脑调整网站大小时，它确实延伸了很多。因此，我想更改代码在平板电脑/移动设备上显示时的大小。

为了检测我在网上找到了以下代码，但我无法让它工作：

<?php
if ( wp_is_mobile() ) 
    /* Include/display resources targeted to phones/tablets here */
 else 
    /* Include/display resources targeted to laptops/desktops here */

?>

谢谢。

【问题讨论】：

您需要为此使用CSS @media queries。

【参考方案1】：

如果您在您的 wordpress 网站中没有对您的代码的编辑权限，您可以添加一个像 fitvids 这样的插件。 如果你有编辑权限，你可以添加一个媒体查询来检查设备宽度是否像这样

@media screen and (max-width: 768px) 
    video 
        max-width: 75%;
        height:auto;
  // iPad

@media screen and (max-width: 480px) 
    video 
        max-width: 45%;
        height:auto;
  //Phone

根据需要调整宽度..

希望对你有帮助