html - 修改网页，使其更兼容移动设备/平板电脑

所以，

我正在寻求一些帮助，使一个相当简单的页面对移动设备/平板电脑更加友好，因为目前在某些移动设备上它看起来非常丑陋:S

我试过正确定位东西并使用像素而不是百分比，因为我只是在每个 Angular (顶部和底部条)真正做一些事情，我尝试结合一些缩放比例和代码来使图像不以一定的屏幕宽度显示

任何人都可以帮助更正我的 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);
});

最佳答案

有多种方法可以让您的网站适应移动/平板电脑设备。

固定设计

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

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

优点

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

缺点

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

响应式设计

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

优点

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

缺点

更大或更多的资源以及稍微更长的加载取决于设计。更长的开发和修改时间。

创建响应式级联样式表

使用设置宽度不再实用，因为有很多可变尺寸。答案是一切都灵活。

在您的示例中使用视口(viewport)元标记来定位设备即访问您的网站。

<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 即可使用它。

规范

现在我们有了选项，让我们来看看您的具体问题。您的网站实际上看起来已经非常敏感了。并且采用固定设计，适用于移动设备和 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) 可以解决 float 或 %width 嵌套元素的问题。此外，容器中的文本不会在没有 css wordwrap:break; 间距的情况下自动换行；

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

关于html - 修改网页，使其更兼容移动设备/平板电脑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20462166/

html - 修改网页，使其更兼容移动设备/平板电脑

HTML:

CSS

JavaScript

上一篇：html - 滚动条通过 CSS animation/transition 出现

下一篇：javascript - IPython:将 Javascript 脚本添加到 IPython notebook