1485 sujets

Web Mobile et responsive web design

Site Bootstrap sur IE11 problème d'affichage

Bonjour,

je fais en ce moment l'intégration d'un site en utilisant le framework Bootstrap.
Si l'affichage et le responsive se fait très bien sur Chrome et FF,
par contre sur IE11 (que mon client utilise) l'affichage est celui du smartphone, quelque soit la largeur de l'écran.

J'ai vérifié dans mon head la présence de ça :
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="../files/ie-emulation-modes-warning.js"></script>


mais ça n'a pas l'air d'y faire grand chose.

Quelqu'un aurait une idée de ce que je pourrais faire ?

Merci
Carosch
Bonjour,

excusez-moi, je ne comprend pas trop votre réponse.
J'ai fait une intégration d'un site en utilisant Bootstrap.
J'ai mis dans mon head tous les hack et script pour IE,
mais mon client me confirme que sur IE l'affichage est celui qui devrait se faire sur mobile.

Est-ce que quelqu'un a eu le problème similaire d'un affichage smartphone sur IE desktop ?

Merci
Carosch
<meta name="viewport" content="width=device-width, initial-scale=1">

Je ne vois pas cette ligne, pourtant en rapport avec ta question, dans le code que tu nous montre.
Merci de la précision, mais en fait elle y est, j'avais pas tout mis, cette ligne me paressant évidente.

Voici mon entête complète, pour y voir un peu plus clair :

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Planning du congrès</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/additional-styles.css" rel="stylesheet">
    <link href="../css/styles-planning.css" rel="stylesheet">
    <link href="../css/jslider.css" rel="stylesheet">
    
    <link href='http://fonts.googleapis.com/css?family=Tienne:400,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
 
<!-- JQUERY --> 
    <script src="../files/jquery-2.1.1.min.js"></script>

 
     <script src="../files/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->


    
<script>
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}    
   </script>   
        
        
    	<!-- slider horaires -->
	<script type="text/javascript" src="../files/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="../files/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="../files/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="../files/tmpl.js"></script>
	<script type="text/javascript" src="../files/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="../files/draggable-0.1.js"></script>
	<script type="text/javascript" src="../files/jquery.slider.js"></script>


    
</head>


carosch
et j'ai aussi ça au tout début de ma css :

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
Je ne connaissait pas @viewport. C'est actuellement implémenté uniquement sur IE. As tu essayé sans ?

Évite de charger 2 fois jquery Smiley cligne
Merci des conseils, ça ne change rien, je vais donc remettre mon nez dans ma css, j'ai sans doute dû faire une bourde là-dedans.

Carosch
Modifié par carosch (22 Dec 2014 - 18:18)
Sujet clos
Aller à