텍스트가 아이폰에 떠 다니는 이미지가 아닙니다.

Question

모바일 장치 용 유체 CSS를 만들었습니다. 여기 내 웹 사이트입니다 Click here

작은 너비의 경우 CSS가 변경되면 브라우저에서 witdh를 줄이면 볼 수 있습니다. 문제는 Google 크롬에서 내 텍스트가 이미지를 잘 둘러 쌉니다.하지만 내 iPhone에서 페이지를 방문하면 텍스트가 img 아래로 이동합니다. iOS에서 float 속성이 제대로 작동하지 않습니까?

모바일 CSS

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
/* remember to highlight inserts somehow! */ 
ins { 
    text-decoration: none; 
} 
del { 
    text-decoration: line-through; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/*!!!!!!!!!!!!!!!!!!Style BEGINS!!!!!!!!!!!!!!!!!!!!*/ 
body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    line-height: 120%; 
    font-weight: 300; 
    color: black; 
    list-style:none; 
    width: 100%; 
    height: 100%; 
} 
h1 
{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 200%; 
    margin-bottom: 5px; 
} 

h2 
{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 100%; 
    margin-bottom:5px; 

} 
h3 
{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 75%; 
} 
/*Wrapper of the whole mobile website*/ 
#wrapper 
{ 
    width: 100%; 
    height: 100%; 
    position:absolute; 
} 

/*Top buttons*/ 
#top_buttons 
{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    text-transform: uppercase; 
    width: 100%; 
} 
#top_buttons a 
{ 
    text-decoration: none; 
    color: white; 
    background: black; 
    width: 100%; 
    display: inline-block; 
    letter-spacing: 0.2em; 
    line-height: 2em; 
    padding: 0 0 0 10px; 
    bottom: 0; 
    border-bottom: grey solid 1px; 
} 

#top_buttons li:last-child 
{ 
    border: none; 
} 
#paperbox 
{ 
position:relative; 
height: 100%; 
width: 100%; 
} 

#main_sliding_pictures 
{ 
float:right; 
margin: 5px 5px 5px 5px; 
} 

#textwrapper 
{ 
    padding: 15px 5px 5px 10px; 
    letter-spacing: 0.1em; 
} 


.slider { 
float:right; 
    margin: 15px 5px 5px 25px; 
    width: 183px; /* Update to your slider width */ 
    height: 183px; /* Update to your slider height */ 
    position: relative; 
    overflow: hidden; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
     -moz-box-shadow: 0 8px 6px -6px black; 
      box-shadow: 0 8px 6px -6px black; 
} 

.slider li { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 


#icons 
{ 
    float:bottom; 
} 


#icons li 
{ 
    display: inline-block; 
    padding: 0 0 0 10px;  
} 

#icons a 
{ 
    color: black; 
    text-decoration: none; 
} 

#goUp 
{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    text-transform: uppercase; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 
#goUp a 
{ 
    text-decoration: none; 
    color: white; 
    background: black; 
    width: 100%; 
    display: inline-block; 
    letter-spacing: 0.2em; 
    line-height: 2em; 
    padding: 0 0 0 10px; 
    bottom: 0; 
} 

HTML

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=320"> 
     <title>Home page</title> 
     <meta name="keywords" content="Homepage"> 
     <meta name="description" content="Homepage"> 
     <meta name="author" content="Conrad Chamerski"> 
     <link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/narrow.css' /> 
     <link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href='css/narrow.css' /> 
     <link rel='stylesheet' media='screen and (min-width: 769px)' href='css/wide.css' /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 


</script> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <nav id="top_buttons"> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="Pages/Projects.html">Project</a></li> 
        <li><a href="Pages/Contact.html">Contact</a></li> 
       </ul> 
      </nav><!--end primary_nav--> 

     <div id="paperbox" class="boxcontainer"> 
      <div id="main_sliding_pictures"> 
    <ul class="slider"> 
     <li> 
    <img src="images/maface.jpeg" height="183px" width="183px" /> 
</li> 
<li> 
    <img src="images/ProjectPictures/elwirebike.jpg" height="183px" width="183px" /> 
</li> 
<li> 
    <img src="images/ProjectPictures/monitor2.jpg" height="183px" width="183px" alt="HELLO"/> 
</li> 
<li> 
    <img src="images/ProjectPictures/projectsmall3.png" height="183px" width="183px" align="ITS WORKING!!!" /> 
</li> 
</ul> 
      </div> 

      <div id="textwrapper"> 
       <h1> 
        About me 
       </h1> 
       <h2> 
        Prospective electrical engineer from Concordia University. My educational interests span from programming to electronics. My hobbies are sports, technology and philosophy. 
       </h2> 
       <div id="rating"></div> 
      </div><!--end textwrapper--> 

      <div id="icons"> 
       <ul> 
        <li><a href="mailto:conradchamerski@gmail.com"> 
        <img src="/images/logos/google.png" width="15px" height="15px">conradchamerski@gmail.com</a></li> 
        <li><a href="http://www.linkedin.com/in/conradchamerski/"> 
        <img src="/images/logos/linkedin.png" width="15px" height="15px">Linkedin</a></li> 
        <li><a href="https://twitter.com/ConradChamerski"> 
        <img src="/images/logos/twitter.png" width="15px" height="15px">Twitter</a></li> 
        <li><a href="http://stackoverflow.com/users/1631092/conrad-c"> 
        <img src="/images/logos/stackoverflow.png" width="15px" height="15px">Stackoverflow</a></li> 
       </ul> 
      </div><!--end icons--> 



    </div><!--end paperbox--> 
      <div id="goUp"> 
      <a href="#home">Top</a> 
     </div><!--end goUp--> 
    </div><!--end wrapper--> 

    <!--<footer>Copyright Conrad Chamerski 2013 &#169;</footer> 
    --> 


    <script src="js/javascript.js"></script> 
    </p> 
</body> 
</html> 

Answer 1

그것은 작동하지만 문제가 아이폰 화면 나누기 (320) 작입니다 ...

것 말이다 내 이 일을하는 의견은 iOS 버전의 iPhone에서 더 좋아 보일 것입니다 :

아이폰의 이미지를 포장는

가 (너무 꽉 추한) 너무 obstrusive ... 내가 여기에 무슨 짓을, 내가 (내 소개)

을 H1을 준 미디어 쿼리에있는 것 @ 미디어 = "스크린 (최대 폭 : 480 픽셀) 및 (최소 폭 : 320 ~) 오른쪽 끄고 고정 : I가 플로트했다

#textwrapper h1 {clear: both; padding: 12px 0;} 

또한 이미지 (.slider) 미국 패딩

이것은 내게 더 효과적이며, 심지어 더 매끄럽게되고 싶다면 이미지를 100 % 높이로 자동으로 만들 수 있으므로 iOS (당신에게 달린 이미지)에서 더 잘 볼 수 있습니다.