Forum : Problème affichage site iOS

Bonjour à tous,

J'ai réaliser un site internet en collaboration avec un client.

Mais je sèche sur un soucis d'affichage qui n'affecte (apparement) que les appareils iOS .

Sur ordinateur la page projet s'affiche ainsi :

[https://www.noelshack.com/2018-35-1-1535372047-ordi.png]()

Si je réduis la fenêtre (pour simuler le responsive), ça s'affiche toujours correctement :

[https://www.noelshack.com/2018-35-1-1535372047-ordi-petit.png]()

Comme elle serait sensé s'afficher sur un iPhone... Cependant la page s'affiche comme ceci sur iPhone :

[https://www.noelshack.com/2018-35-1-1535372047-iphone.jpg]()

Alors que sur Android, pas de soucis d'affichage :

[https://www.noelshack.com/2018-35-1-1535372046-android.jpg]()

J'ai essayé de trouver la source du problème (CSS / JS ?) mais l'inspecteur de code deviens inutile sur ordinateur puisque la page s'affiche correctement même avec la fenêtre reduite ou avec une simulation du responsive. Le probleme est visible uniquement depuis un iPhone.

Avez vous une idée d'ou viens le probleme ? Ou auriez vous une idée comment je peu cibler le probleme ?

Le site est en ligne donc vous pouvez également tester la page à cette adresse : [http://julian-bader.ch/projects]()

Voici le code de la page projet :

<?php 
require_once 'administration/inc/db.php';
$page = 'projects';

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Julian Bader - Projects</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/animate.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
</head>

<body>
    <?php include('inc/menu.php'); ?>

        <div class="container">

            <div class="card-columns">
                <?php  

            //======================================
            // Boucle sur les projets
            //======================================

            $req = $pdo->query("SELECT * FROM portfolio ORDER BY ordre ASC");

            while ($portfolio = $req->fetch()){ 
            ?>

                    <div type="button" class="btn btn-primary card animated slideInUp" data-toggle="modal" data-target="#basicModal<?=$portfolio->id;?>" style="display:none">
                        <img class="card-img-top" src="medias/cover/<?=$portfolio->image?>" alt="Card image top">
                        <div class="card-img-overlay">
                            <h1 class="card-title"><?=$portfolio->titre;?></h1>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal animated slideInUp bd-example-modal-lg" id="basicModal<?=$portfolio->id;?>" tabindex="-1" role="dialog" aria-labelledby="basicModal<?=$portfolio->id;?>" aria-hidden="true" data-target=".bd-example-modal-lg" data-backdrop="false">
                        <div class="modal-dialog modal-dialog-centered modal-lg row">
                            <div class="modal-content">
                                <div class="modal-header row">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true"><img src="img/croix.png" style="padding-top: 5px;"></span>
                                    </button>
                                </div>
                                <div class="modal-body row">

                                    <?php ParcourIMG("medias/projet".$portfolio->id."/*"); ?>
                                      <div class="texte col-lg-6 col-md-8 col-sm12 col-xs-12">  <p>
                                            <?=$portfolio->titre;?>
                                          </p>
                                     <p>
                                            <?php echo $portfolio->date; ?>
                                        </p>
                                    </div>
                                        <p class="texte col-lg-6 col-md-8 col-sm12 col-xs-12">
                                            <?=$portfolio->info;?>
                                        </p>

                                </div>

                            </div>
                        </div>
                    </div>

                    <?php 
            //======================================
            // Fin de la boucle
            //======================================
            } $req->closeCursor();?>

            </div>
            <!--card-columns-->

        </div>
        <!--container-->

        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.js"></script>

        <script src="js/aos.js"></script>

        <script type="text/javascript">
            AOS.init({
                duration: 1000,
            });
        </script>

        <script>
            $('#myModal').on('shown.bs.modal', function() {
                $('#myInput').trigger('focus')
            })
        </script>

        <script>
            setTimeout(function() {
                $('.btn').show().addClass('animated slideInUp');
            }, 500);
        </script>

        <script>
            $(function() {
                $(".btn").on('click', function() {
                    $("#video").addClass('animated zoomOut');
                });
            });
        </script>

        <script>
            $(function() {
                $(".close").on('click', function() {
                    $("#video").addClass('animated zoomIn');
                });
            });
        </script>

</body>

</html>

Merci d'avance pour votre aide ! :)

Problème affichage site iOS

2 réponses