0
J'ai déjà posé cette question, mais c'était trop déroutant et je n'ai pas pu le préciser. J'ai corrigé mon site et fait maintenant des tests pour que mon site responsive fonctionne sur différentes plateformes mobiles. Cependant, lorsque vous ouvrez le site sur Android mobile, tout est en panne. Pour la conception responsive, j'utilise un fichier externe et le relier à html comme ceci.Problème de réponse avec mon site Web
voici le site http://www.sfu.ca/~nnabeel utiliser mobile pour ouvrir le site. J'utilise meta-tag pour rendre l'échelle du site capable de différentes plates-formes.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimun-scale=1.0, initial-scale=1.0"/>
Voici mon code HTML/CSS pour un design réactif.
HTML:
<body>
<div id="controls">
<a href="index.html">Home</a>
<a href="work.html">Work</a>
<a href="contact.html">About</a>
</div>
<div id="pagewrap">
<div id="home">
<article>
<img src="images/Logo.png" width="150" height="150" alt="Logo"/>
<p>My name is Nabeel Muhammad and I change innovative ideas into design </p>
<div id="socialmedia">
<a href="https://twitter.com/mnabeel87" target="new"> <img src="images/twitter.jpg" height="40" width="40" alt="Twitter Logo"/></a>
<a href="http://www.linkedin.com/in/mnabeel87" target="new"> <img src="images/linkedin.jpg" height="40" width="40" alt="Linkedin Logo"/> </a>
</div> <!--Social Media Ends-->
</article>
<div id="skillslevel"><p>Skills Level</p></div>
<section>
<div id="psskills"> <img src="images/photoshop.png" width="40" height="40" alt="Adobe PhotoShop" /> </div>
<div id="psrating"> </div>
<div id="aiskills"> <img src="images/illustrator.png" width="40" height="40" alt="Adobe Illustrator" /> </div>
<div id="airating" > </div>
<div id="inskills"> <img src="images/indesign.png" width="40" height="40" alt="Adobe InDesign" /> </div>
<div id="inrating"0> </div>
<div id="dwskills"> <img src="images/dremweaver.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="dwrating"> </div>
<div id="prskills"> <img src="images/premier.png" width="40" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="prrating"> </div>
<div id="htmlskills"> <img src="images/html.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="htmlrating"> </div>
<div id="cssskills"> <img src="images/css.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="cssrating"> </div>
<div id="jsskills"> <img src="images/javascript.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jsrating"> </div>
<div id="jqskills"> <img src="images/jquery.png" width="30" height="40" alt="Adobe DreamWeaver" /> </div>
<div id="jqrating"> </div>
</section>
<div id="scale"> <img src="images/linebar.png" width="330" alt="Scale"/> </div>
<div id="ratingnumber">
<ul>
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
</div>
</div> <!--Home Ends-->
</div>
CSS pour mobile
#pagewrap {
width: 480px;
margin: 0 0 0 -0.6em;
position:relative;
}
#controls {
margin:-0.3em auto 0 -0.3em;
text-align: center;
width:480px;
font-family: 'Bebas';
font-size:1.87em;
background-color: #b0d8a3;
line-height:1.3em;
}
#controls a {
display: inline-block;
width: 480px;
margin: 0 auto;
background: #5cc3c1;
color: #fff;
text-decoration: none;
border-radius: 5px;
line-height: 32px;
}
#home article img {
position:relative;
left:3em;
top:4em;
}
#home article p {
font-size:2.5em;
font-family: 'Bebas';
text-align:left;
position:relative;
width:10em;
left:1em;
top:1em;
line-height:1.1em;
padding: 0 0;
}
#socialmedia {
position: relative;
top:-1.8em;
left:-0.5em;
margin-right:1em;
}
#socialmedia img {
position:absolute;
left:8em;
top: 2.5em;
}
/*Skills*/
#skillslevel {
position:absolute;
top:25em;
left:2.5em;
}
#skillslevel p {
font-size:1.5em;
font-family: 'Cabin';
}
section {
position: relative;
bottom:22.5em;
}
section #psskills {
position: absolute;
left:2.5em;
top:27em;
}
section #psrating {
width: 20.3em;
height: 2.3em;
background: #bfddc3;
position: absolute;
left:5.5em;
top:27em;
}
section #aiskills {
position: absolute;
left:2.5em;
top:30em;
}
section #airating {
width:18.6em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:30em;
}
section #inskills {
position:absolute;
left:2.5em;
top:33em;
}
section #inrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:33em;
}
section #dwskills {
position:absolute;
left:2.5em;
top:36em;
}
section #dwrating {
width:19.8em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:36em;
}
section #prskills {
position:absolute;
left:2.5em;
top:39em;
}
section #prrating {
width:19.3em;
height:2.3em;
background-color: #bfddc3;
position: absolute ;
left: 5.5em;
top:39em;
}
section #htmlskills {
position:absolute;
left:2.5em;
top:42em;
}
section #htmlrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:42em;
}
section #cssskills {
position:absolute;
left:2.5em;
top:45em;
}
section #cssrating {
width:20.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:45em;
}
section #jsskills {
position:absolute;
left:2.5em;
top:48em;
}
section #jsrating {
width:14.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:48em;
}
section #jqskills {
position:absolute;
left:2.5em;
top:51em;
}
section #jqrating {
width:12.3em;
height:2.3em;
background-color: #adc8bf;
position: absolute ;
left: 5.5em;
top:51em;
}
#scale {
position:absolute;
top:48.5em;
left:5.2em;
}
#ratingnumber ul{
position:absolute;
top:57em;
left:-6em;
list-style:none;
}
#ratingnumber ul li{
display:inline-block;
margin-left:9em;
font-family: 'Cabin';
font-size:16px;
}
Je sais que beaucoup de CSS, certains d'entre vous pourriez trouver quelques-unes des choses inutiles, mais qui est ma façon d'aborder le problème.
Donc, quand j'ouvre le site Web en tablette, ça fonctionne très bien, mais dès que je l'ouvre dans un téléphone mobile, le design s'est effondré.
Merci pour l'aide.