如何修改我的 html/jquery 页面以适应 android 移动屏幕？答案

【问题标题】：How can I modify my html/jquery page fit to an android mobile screen?如何修改我的 html/jquery 页面以适应 android 移动屏幕？
【发布时间】：2014-03-26 00:17:52
【问题描述】：

我一直在网上找，好像大家都说用""，但是我这个好像不行，朋友让我用jquery mobile做我的网站，但是我觉得应该有解决这个问题的方法。下面是我的html和css页面。

-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 适应移动屏幕和桌面而不使用不同的代码吗？
是的，这是计划，这可能吗？
酷 :) 完全有可能 - 请参阅下面的答案以获取更多信息。

标签： android jquery html jquery-mobile

【解决方案1】：

如果它是您正在创建的网站并希望用户在移动设备上查看它，请查看 bootstrap。

【讨论】：

【解决方案2】：

您正在寻找的是一个称为响应式设计的概念。这意味着您的 CSS 和 HTML 会适应显示它们的设备。所以你可以在手机浏览器和巨大的桌面显示器上打开同一个网站，它们都可以工作。也就是说，内容可以在两种设备上轻松查看。

此页面将解释您需要了解的所有信息： http://webdesign.tutsplus.com/articles/designing-for-a-responsive-web--webdesign-3850

但是如果你只想跳进去，那么你可以使用像 Bootstrap 这样的框架，就像这里其他人所说的那样。有很多框架，其中一些非常轻量级，而另一些则功能丰富。 Bootstrap 可能是最著名的（因此也是最通用的）。您应该环顾四周并尝试一些不同的。

请继续阅读本教程，以便了解网格系统的工作原理。

【讨论】：