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

Question

Using wordpress for my new site, and I am putting together the content of my pages. But I'm struggling to come up with a way to detect a mobile browser, and then with the result, change the visibility of certain elements (text / images) on the page depending on whether it is being viewed from a mobile device or a computer.

Eg. If onmobile=true, , else .

Thanks in advance :)

Answer 1

Likely, you'll want to differentiate between screen sizes, rather than whether or not it's a mobile browser.

As commented, you'll be better off using css media queries. One of the existing css frameworks, such as bootstrap, can be a good way to achieve this, but you don't have to use a framework.

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

Will make an item hidden on small screens (including mobile devices).

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

Will make something hidden on large screens. From there, mix and match to achieve whatever effect you're after.

On bootstrap, you've got helper-classes such as visible-md-block and hidden-xs to fine-tune visibility on various screen sizes. See Bootstrap docs for more info on that bit.