如何检测移动浏览器（PHP/Javascript）然后进行图像/文本更改？答案

【问题标题】：How to detect Mobile Browser (PHP/Javascript) and then make image/text change?如何检测移动浏览器（PHP/Javascript）然后进行图像/文本更改？
【发布时间】：2021-07-08 00:56:38
【问题描述】：

在我的新网站上使用 wordpress，我正在整理我的网页内容。但是我正在努力想出一种方法来检测移动浏览器，然后根据是从移动设备还是从移动设备查看页面上的某些元素（文本/图像）来更改页面上的可见性。电脑。

例如。如果 onmobile=true, , 否则 .

提前致谢:)

【问题讨论】：

也许您应该考虑在客户端使用响应式设计和 CSS...
我同意 MrTux。实现响应式设计通常使用框架来完成，例如，查看Twitter Bootstrap。
Java 还是 JavaScript？（是的，这很重要）。
最好的方法是使用媒体查询。

标签： javascript php jquery html wordpress

【解决方案1】：

您可能想要区分屏幕尺寸，而不是它是否是移动浏览器。

正如评论，您最好使用 css 媒体查询。现有的 css 框架之一（例如 bootstrap）可能是实现此目的的好方法，但您不必必须使用框架。

@media (max-width: 1024px) {
    div.myClass {
        display: none;
    }
}

将使项目隐藏在小屏幕上（包括移动设备）。

@media (min-width: 1024px) {
    div.myClass {
        display: none;
    }
}

会让某些东西隐藏在大屏幕上。从那里开始，混合搭配以达到您想要的任何效果。

在引导程序中，您有诸如 visible-md-block 和 hidden-xs 之类的辅助类来微调各种屏幕尺寸的可见性。有关该位的更多信息，请参阅Bootstrap docs。

【讨论】：

【解决方案2】：

您可以检查移动浏览器并通过以下方式进行编辑：

CSS：

#show{display:none;}

Javascript

function check{
    if(window.innerWidth <= 800 && window.innerHeight <= 600) {
        document.getElementById('#show').style.display= 'block' ;     
    } }

【讨论】：