0

I have a code snippet that allows me to view a 3d model in my website. The thing is, I don't want the model to show up on mobile so I am trying to create an if statement with the wp_is_mobile() condition but it's not working. Can someone take a look and see what's going wrong?

<?php if (!wp_is_mobile()) : ?>
   <script 

style>
model-viewer{
    width: 100%;
    height: 35vh;
}
@media (max-width: 2024px) {
model-viewer{
    height:512px;
}
}
@media (max-width: 2024px) {
model-viewer{
    height:512px;
}
}
</style>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> 

<model-viewer
    src="http://ferrka-shop.local/wp-content/uploads/2023/04/wornTshirtMockupMinimalCity/scene.gltf"
    shadow-intensity="1"
    disable-zoom
    camera-controls
    auto-rotate
>
</model-viewer>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"> 
</script>

 </script> 

?>

this is what I tried so far

Lemode
  • 1
  • 1
  • 1
    It would be better to use a CSS media query for this to detect a desktop/mobile browser: https://stackoverflow.com/q/14942081/519413 – Rory McCrossan Apr 26 '23 at 07:56
  • Does this answer your question? [Detect if a browser in a mobile device (iOS/Android phone/tablet) is used](https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used) – Esmaeil Ahmadipour Apr 27 '23 at 13:59

0 Answers0