时间戳

首页 > 解决方案 > 如何在 Wordpress 上检测基于设备的 HTML 代码？

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

问题描述

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

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

<video poster="video poster link" controls="controls" width="270" height="490">
<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 */
}
?>

谢谢你。

标签： htmlcsswordpressresponsive

解决方案

如果您在 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

根据需要调整宽度..

希望这可以帮助

推荐阅读