网站在移动设备上看起来很糟糕答案

【问题标题】：Website looks really bad on mobile devices网站在移动设备上看起来很糟糕
【发布时间】：2014-06-15 09:51:22
【问题描述】：

在大约一个月前学习了一些 HTML/CSS 之后，我一直在构建我的第一个网站。它在我尝试过的所有桌面浏览器（safari、firefox、chrome、IE）上看起来都不错，但是当我在 ios safari/chrome 上对其进行测试时，它看起来真的很糟糕......

经过大量搜索，我似乎无法找到答案，任何对此的帮助将不胜感激！

我有一个包装 div 和一些其他 div 在 css 中设置为 100% 宽度

CSS

    html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

.wrapper {
        position:absolute;
        top:0px;
        width:100%;
        margin:auto;
        height:9000px;;
        z-index:0;
}

#home {
        position:absolute;
        top:0px;
        width:100%;
        margin:auto;
        height:1000px;
        background-color:#00ADEE;
        z-index:0;
}

HTML

<body>      
    <div class="wrapper">
        <div id="home">
        <div id="homecontainer">
        <div id="homelogo"></div>
                <a href="#thumbnailgallery" class="smoothScroll"><div id="projectbutton"></div></a>
                <a href="#about" class="smoothScroll"><div id="aboutbutton"></div></a>
                <a href="#contact" class="smoothScroll"><div id="contactbutton"></div></a>
        </div>
    </div> <!--Home closing tag-->

我是否缺少某种 HTML 代码来检测移动显示器？

【问题讨论】：

这是您的完整 HTML 吗？您缺少一些元素，例如您的 HTML 标记和一些结束 div。让我知道这是否是您的完整代码。此外，如果它是 100%，则不需要提供包装器 margin:auto。你会想给它90%的宽度，然后给它margin:auto。这将使它居中，并使其在移动设备上看起来不错。您需要确保在提出问题时向我们提供了尽可能多的详细信息以及您正在使用的完整代码。您的问题将被否决，就像您已经看到的那样。
你需要使用 CSS 媒体查询
CSS媒体查询，也可以使用.htaccess
你能提供你网站的链接吗？
张贴一些你的经历和你想看到的截图。

标签： html css mobile

【解决方案1】：

您可以使用视口元数据来定义移动设备上的初始比例

所以在 head 标签中添加视口元数据，如下例所示

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>      
        <div class="wrapper">
        <div id="home">
        <div id="homecontainer">
        <div id="homelogo"></div>
                <a href="#thumbnailgallery" class="smoothScroll"><div id="projectbutton"></div></a>
                <a href="#about" class="smoothScroll"><div id="aboutbutton"></div></a>
                <a href="#contact" class="smoothScroll"><div id="contactbutton"></div></a>
        </div>
    </div>

在此处阅读更多关于视口元的信息http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

【讨论】：