Detecting mobile browser

[Lubomír Ludvík]

Web looked bad on a mobile device, so I detecting mobile browser and reducing the image preview.

Code: Select all

<script>
if(/Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent)){
  document.currentScript.outerHTML = `[img=images/mapka_apartmany.jpeg scale=5% float=right]`;
}else{
  document.currentScript.outerHTML = `[img=images/mapka_apartmany.jpeg scale=18% float=right]`;
}
</script>

Is extension that detects the mobile and change the template or change .css?

[Lubomír Ludvík]

and I change css style:

Code: Select all

@media only screen and (max-width: 480px) { ... }

[fraenkiman]

Hello Lubomír,

try the mobile plugin. The code may need to be updated.

Have a good weekend
With best regards
Frank

[Arvid]

Ahoj Lubomír,

šťastný nový rok!

The Mobile plugin works fine, I use it on my personal website.
But it's basically a workaround; the best way to serve a good layout to big and small screens is proper use of responsive web design.
Check out https://flatpress.org for example

All the best,
Arvid