モバイル デバイス用の流動的な CSS を作成しました。ここに私のウェブサイトがありますここをクリック
css の幅が小さい場合は、幅を小さくすることでブラウザーから表示できます。問題は、Google Chrome ではテキストが画像をうまく囲んでいるのに、iPhone からページにアクセスすると、テキストが img の下に表示されることです。float プロパティは iOS でうまく機能しませんか?
モバイル 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 ©</footer>
-->
<script src="js/javascript.js"></script>
</p>
</body>
</html>