0
我一直在網上尋找它，似乎每個人都參考使用「」，但這似乎並沒有在我的情況下工作，一個朋友問我讓我的網站使用jQuery手機，但我覺得應該有一個繞過這個方法。以下是我的html和css頁面。我該如何修改適合android手機屏幕的html/jquery頁面？
-html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Task 5 Report</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var act = [0,0]; //added this
function resizeBoxes() {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
$('#main').css({
width: browserWidth*4,
height: browserHeight*1,
marginLeft: browserWidth*act[0]*-1, //added this
marginTop: browserHeight*act[1]*-1, //added this
});
$('.box').css({
width: browserWidth,
height: browserHeight,
});
}
resizeBoxes();
$(window).resize(function() {
resizeBoxes();
});
$('nav ul li a').click(function(){
return false;
});
function goTo(horizontal,vertical) {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
act[0] = horizontal; //added this
act[1] = vertical; //added this
$('#main').animate({
marginLeft: '-'+browserWidth*horizontal,
marginTop: '-'+browserHeight*vertical,
}, 1000);
}
$('#link1 a').click(function(){
goTo(0,0);
});
$('#link2 a').click(function(){
goTo(1,0);
});
$('#link3 a').click(function(){
goTo(2,0);
});
$('#link4 a').click(function(){
goTo(3,0);
});
});
</script>
</head>
<body>
<div id="main">
<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Data</a></li>
<li id="link3"><a href="#">Server Side</a></li>
<li id="link4"><a href="#">Techical report</a></li>
</ul>
</nav>
<h2>Kunal Matwani</h2>
<h3>
This is a website with a portfolio of my work.<br> In this portfolio are the screenshots depicting my work with the android prototype.<br>
</h3>
</section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Data</a></li>
<li id="link3"><a href="#">Server Side</a></li>
<li id="link4"><a href="#">Techical report</a></li>
</ul>
</nav>
<h2>Big data</h3>
<p>
<ul class="contentul">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</p>
</section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Data</a></li>
<li id="link3"><a href="#">Server Side</a></li>
<li id="link4"><a href="#">Techical report</a></li>
</ul>
</nav>
<h2>Server Side</h2>
<p>
This page contains all the information on the work done on the server side i.e MySql,Jetty etc.
</p>
</section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Data</a></li>
<li id="link3"><a href="#">Server Side</a></li>
<li id="link4"><a href="#">Techical report</a></li>
</ul>
</nav>
<h2>Technical report</h2>
<p>
Attached is the technical report as required.
</p>
</section>
</div>
</body>
</html>
-CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 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;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
* These selection declarations have to be separate
* No text-shadow: twitter.com/miketaylr/status/12228805301
* Also: hot pink!
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a:hover, a:active { outline: 0; }
/*=========================================
Main Styles
=========================================*/
body {
font-family: arial;
font-size: 15px;
overflow: hidden;
}
h2 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 54px;
margin-top: 50px;
}
h3 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
margin-top: 20px;
}
p {
color: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
line-height: 24px;
margin-top: 20px;
}
.contentul {
text-align: center;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
/*=========================================
Nav bar
=========================================*/
nav {
height: 50px;
width: 100%;
}
nav ul li {
height: 50px;
width: 25%;
text-align: center;
float: left;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
line-height: 50px;
display: block;
}
/*=========================================
Nav links
=========================================*/
#link1 {
background: #1691BE;
}
#link2 {
background: #166BA2;
}
#link3 {
background: #1B3647;
}
#link4 {
background: #152836;
}
/*=========================================
Styling each section
=========================================*/
.box {
float: left;
}
#box1 {
background: #1691BE;
}
#box2 {
background: #166BA2;
}
#box3 {
background: #1B3647;
}
#box4 {
background: #152836;
}
您是否希望單頁和CSS適合移動屏幕以及桌面而不使用不同的代碼？ –
雅這是計劃，這可能嗎？ – user2631932
酷:)完全可能 - 請參閱下面的答案以獲取更多信息。 –