首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >解决手机上的放大问题

解决手机上的放大问题
EN

Stack Overflow用户
提问于 2016-06-22 21:23:53
回答 2查看 42关注 0票数 0

我已经创建了一个使用node js和html的网站。当我在手机上查看网站时,我必须放大才能看到它。有没有什么代码可以放在我的css中,用来修复网站内容以适应窗口/浏览器的大小?

代码语言:javascript
运行
复制
  /*Styles the Webpage*/

h1 {
    color:black;
    font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
    font-stretch: normal;
  font-variant: small-caps;
  font-size: 36px;
    text-align: center;
    padding: 35px;
}

label {
    position: relative;
  float: left;
    text-align: left;
    font-size: 18px;
    color: black;
}
input[type=submit] {
    width: 5em;  height: 1.5em;
      align: center;
}
input[type=number] {
    width: 8em;  height: 1.5em;
}
div {

      border: 1px solid black;
        box-sizing: border-box;
        padding: 25px;

    }
body {
    background-color:#c7c9c7    ;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 60px;
    text-decoration: none;
}

a:hover:not(.active) {
    background-color: #8a8d8f;
}

.active {
background-color:#002B7F    ;
}
img {
    position: fixed;
    width: 190px;
    height:50px;
    left: 40px;
  top: 40px;
}
EN

回答 2

Stack Overflow用户

发布于 2016-06-22 21:26:35

你需要让你的网站具有响应性。您可以使用CSS media queries完成此操作,并将其添加到head:

代码语言:javascript
运行
复制
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
票数 1
EN

Stack Overflow用户

发布于 2016-06-22 21:26:45

将以下代码放入<head>标记中:

代码语言:javascript
运行
复制
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

它将使每个设备显示您的元素的实际像素大小。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37969438

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档