Question

我在一个月前学习了一些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代码来检测移动显示器？

Answer 1

您可以使用viewport meta来定义移动设备上的初始比例

所以在head标签中添加viewport meta，如下例

<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>

在这里阅读有关viewport meta的更多内容http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

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

1 个答案: