Question

我没有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 */
}
?>

谢谢。

Answer 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

根据需要调整宽度。

希望这会有所帮助

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

1 个答案: