Question

SO，

我正在寻找一些帮助使一个相当简单的页面更具移动/平板电脑友好性，因为目前在某些移动设备上看起来非常难看：S

我已经尝试正确定位东西并使用像素而不是百分比，因为我只是在每个角落（顶部和底部条形图）中真正做东西而且我试图合并一些缩放以及代码以使图像不以某个屏幕宽度显示

任何人都可以帮助纠正我的html / css，以便它完全兼容，因为当我进行更改时它永远不会正常工作。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="true" name="HandheldFriendly" />
    <meta content="width=device-width" name="viewport" />
    <meta content="width=device-width,initial-scale=0.75" name="viewport" />
    <title>Website.com</title>
    <link href="testing.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header_container">
        <div id="header">
            <div class="headimage">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="headimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <select class="class-selector">
                <option value="">- Testing Dropdown -</option>
            </select>
            <div class="classcycler"><a href="javascript: void(0);" id="NextPage"><font color="#EFEFEF">Next Page</font></a>  <font color="red">|</font>  <a href="javascript: void(0);" id="PreviousPage"><font color="#EFEFEF">Previous Page</font></a>
            </div>
            <div class="classcycler2"><a class="downclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Down</font></a>  <font color="red">|</font>  <a class="upclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Up</font></a> 
            </div>
            <div class="headright"><a class="TOPJS" href="javascript: void(0);"><font color="#EFEFEF">Up to Top</font></a> 
                <br/> <a class="KEYJS" href="javascript: void(0);"><font color="#EFEFEF">Down to Bot</font></a> 
            </div>
        </div>
    </div>
    <div id="container">
        <table id="gradient-style" summary="">      <tbody><thead><tr><th colspan="30">Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>></th></tr></thead></tbody></table>
    </div>
    <div id="footer_container">
        <div id="footer">
            <div class="footimage">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="footimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <div class="footleft">
                <a class="def" href="javascript: void(0);"></a>
            </div>
            <div class="footright">
                <a class="abc" href="javascript: void(0);"></a>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    background: #F0F0F0;
    line-height: 1.6em;
    margin: 0;
    overflow-x: scroll;
    padding: 0;
}

#header_container {
    background: url(gradhead.png) repeat-x #111625;
    border: 0 solid #666;
    height: 80px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

#footer .headimage {
    position: relative;
}
#header .headright {
    font-size: 20px;
    position: fixed;
    right: 10px;
    text-align: right;
    top: 15px;
}

#header .class-selector {
    left: 10px;
    position: fixed;
    top: 5px;
}

#header .classcycler {
    font-size: 20px;
    left: 10px;
    position: fixed;
    top: 30px;
}

#header .classcycler2 {
    font-size: 20px;
    left: 10px;
    position: fixed;
    top: 50px;
}

#container {
    margin: 0 auto;
    padding: 80px 0;
    width: 100%;
}

#footer_container {
    background: url(gradhead.png) repeat-x #111625;
    border: 0 solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer .footleft {
    font-size: 20px;
    left: 10px;
    position: absolute;
    top: 10px;
}

#footer .footright {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}

#footer .footimage {
    position: relative;
    top: -13px;
}

#footer .footleft a {
    background: url(http://placehold.it/60x60/) no-repeat;
    display: block;
    height: 60px;
    width: 60px;
}

#footer .footleft a:hover {
    background: url(http://placehold.it/60x60/000) no-repeat;
}

#footer .footright a {
    background: url(http://placehold.it/60x60/) no-repeat;
    display: block;
    height: 60px;
    width: 60px;
}

#footer .footright a:hover {
    background: url(http://placehold.it/60x60/000) no-repeat;
}

#header,#footer {
    color: #ECECEC;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%;
}

@media screen and max-width 600px {
    .headimager {
        display: none;
    }
}

@media screen and max-width 450px {
    .footimager {
        display: none;
    }
}

没有jsfiddle链接的原因是因为它不允许我放入元标记。

的JavaScript

$("a.def").click(function () {
    $('body').animate({
        "scrollLeft": "-=404"
    }, 200);
});

$("a.abc").click(function () {
    $("body").animate({
        "scrollLeft": "+=404"
    }, 200);
});

Answer 1

有几种方法可以在您的网站上容纳移动/平板电脑设备。

固定设计

创建一个适用于所有格式的样式表。您的网站在所有设备上都显示相同，但此过程将是最简单的解决方案。

固定设计过程应主要使用百分比和最大宽度来创建基于设备宽度而变化的内容。

赞成

如果使用得当，此过程使用的资源最少，创建和修改速度更快。

CONS

如果您的网站在网页上包含大量内容，那么您的网站可能会在较小的设备上变得非常拥挤

响应式设计

如果您希望以不同方式查看您的网站，并且可以在不同设备上进行最佳查看，那么您需要一个响应式设计。这可以通过使用动态样式表或为不同设备使用多个样式表来实现。

赞成

一个非常通用的网站，可以根据观看设备进行独特和最佳的显示。

CONS

根据设计，更大或更多的资源和略微更长的负载。更长的开发和修改时间。

创建响应级联样式表

使用设定宽度不再实用，因为有很多可变尺寸。答案很灵活。

使用示例中的视口metatag来定位设备正在访问您的网站。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

显然需要viewport元标记，因为它受到大多数流行的移动浏览器的支持，并被数以千计的网站使用。
使用媒体查询。

媒体查询允许您为特定屏幕宽度编写单独的规则。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

使用Javascript。

除了bootstrap之外的一个好的javascript解决方案是 jquery mobile ，它可以通过为您完成工作来节省设计响应式网站的时间和精力。您无需知道或编辑任何javascript即可使用它。

<强> SPECIFICS信息

所以现在我们有了选项让我们来看看您的具体问题。您的网站实际上似乎已经非常敏感。并且使用固定设计适用于移动设备和PC。

更改您的媒体查询（他们不会在没有括号的情况下工作）

发件人

@media screen and max-width 600px { .headimager { display: none; } } @media screen and max-width 450px { .footimager { display: none; } }

以

@media screen and (max-width:600px) { .headimager { display: none; } } @media screen and (max-width:450px) { .footimager { display: none; } }

我建议不要使用表格（＃gradient-style）。一个简单的100％div（#container）将使用浮动或％宽度嵌套元素。容器中的文本也不会自动换行而没有css wordwrap的间距：break;

除此之外没有明显的问题，但如果您需要进行特定更改，请添加评论。

Answer 2

我不认为doctype会在这种情况下改变任何东西，正如Drue所评论的......

处理不同形式因素（例如平板电脑和手机）的最佳方式是使用媒体查询，就像您已经做过的那样。这些可能需要大量的写作才能正确，因此我建议您使用框架。可以说，Bootstrap（http://getbootstrap.com/）是目前最受欢迎的，但有许多框架可以解决桌面到移动设备的优雅降级问题。

如果您不想使用框架，min-width和max-width是您的朋友。他们会允许物品开始出现在彼此之下，而不是彼此相邻。

引导您的网站 如果我们查看您的代码片段，您需要应用Bootstrap的网格系统。如果你在你的代码中添加bootstrap，那么css可能会覆盖很多东西，或者实际上会破坏你的布局。我可能会做一些工作来做到这一点。（另一个lib可能因此更好，但基本上它们都是一样的，所以我会把它保持为bootstrap）

Bootstrap使用网格系统（与许多其他系统一样）将项目保持在适当的位置，并在视口变小时使它们正常移动。 Bootstrap是以“移动优先”为基础构建的，这意味着您可以从最小的视口向桌面计算机工作。这可能听起来很愚蠢/不直观，但它在使用中非常实用。 Bootsrap有一些您添加到HTML中的类和ID，然后它会自动调整正确的组件大小。它创建了12列的布局。大多数网站不会有12列，因此您创建的列跨越12列中的2列或更多列。 http://getbootstrap.com/css/#grid表明非常好。查看代码，最终可能会出现类似

的内容

<body>
    <div id="header_container" class="container"><!-- .container centers it -->
        <!-- see: http://getbootstrap.com/components/#navbar for navbar stuff -->
        <div id="header" class="navbar-header"> 
            <div class="headimage navbar-brand">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="headimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            [..]    
        </div>
    </div>
    <!-- .row and .col-* manage the grid system -->
    <div class="row">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        The below help-help-help should be 3 columns on large screens, and stack on top of eachother on smaller resolutions
      </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 1
        </div>
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 2
        </div>
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 3
        </div>
    </div>
    <div id="footer_container">
        <div id="footer" class="row">
            <div class="footimage col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="footimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <div class="footleft col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a class="def" href="javascript: void(0);"></a>
            </div>
            <div class="footright col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a class="abc" href="javascript: void(0);"></a>
            </div>
        </div>
    </div>
</body>

这绝对是思考网站设计的另一种方式，但Bootstrap的文档非常清楚，并且有很多教程（确保它们适用于Bootstrap3，而不是bootstrap2。存在一些很大的差异）

哦，不要使用<font>和<table>作为SO上的布局工具发布代码。这很痛;）

Answer 3

环顾四周我找到了可滚动表的这些解决方案，请看一下，如果这可以帮到你，请告诉我：

Table scroll with HTML and CSS

使用此代码：

tbody{
 height: 400px;/*set the size you want*/
 overflow: auto;
}

他的fiddle

这个用jquery：

CSS-Only Scrollable Table with fixed headers

修改网页，使其更具移动/平板电脑兼容性

HTML：

CSS

的JavaScript

3 个答案:

他的fiddle

和fiddle