Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 26, 2024 at 9:23 pm #1459784
    Guenni007

    There are ways to scale checkboxes for safari – because these are very small . But doing this will scale those checkboxes for mobile devices iOS too!
    I tried to circumvent that by detection of touch-device – but it does not work.

    f.e: 

    .responsive:not(.touch-device)  input[type=checkbox],
.responsive:not(.avia_mobile)   input[type=checkbox] {
    -webkit-transform: scale(2,2); 
    transform-origin: left center;
}
    June 26, 2024 at 10:35 pm #1459790
    Guenni007

    i managed it now with :

    function detect_ios_device(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    if (navigator.maxTouchPoints > 1) {
      document.documentElement.className += ' ios-device ';
    }
});
</script>
<?php
}
add_action('wp_head', 'detect_ios_device');

    so even if you set your iPhone / iPad to show websites as desktop websites – this is an additonal class on html then.

    i can use then :

    .responsive:not(.avia_mobile).avia-safari #top input[type=checkbox] {
    -webkit-transform: scale(2,2); 
    transform-origin: left center;
}
.responsive.ios-device.avia-safari #top input[type=checkbox] {
    -webkit-transform: none; 
}
    June 27, 2024 at 4:16 am #1459804
    Ismael

    Hi,

    Glad to know that you’ve found a working solution. Thanks for sharing!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.