gpt4 book ai didi

HTML 和 CSS 移动内容放大了吗?

转载 作者:行者123 更新时间:2023-11-28 04:29:41 25 4
gpt4 key购买 nike

您好,我创建了一个网站:Omicrome.com 桌面版可以找到一些我仍在研究但无关紧要的东西。当我进入移动版本时,一切都被放大了。如果我不设置视口(viewport)并放入:

   <meta name="HandheldFriendly" content="true"/>

内容符合我在我的 Android HTC one m9 上想要的方式。我运行了一个“我的网站是否适合移动设备测试”,它说它不适合移动设备,因为我没有设置视口(viewport)并且内容不适合屏幕,在我的手机上它适合但在那些网站的图像上它就是全部放大。如果我确实设置了视口(viewport),那么所有内容都会在我的手机和那些网站上放大。这是我页面头部的一个简短片段。

 <html class="HTML1">
<head>
<title>Omicrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"language="javascript" type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="img/icon.ico" type="image/x-icon" />
<link rel="ICON" href="img/icon.ico" type="image/ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/MobileStyle.css">
<meta NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="The homepage for Omicrome.com, where you get the best of technology, science and making. We have on going projects and many articles for your enjoyment.">


</head>
<body>


<div class = "container_24" style="min-height: 100%;">
<header>....

为什么会发生这种情况,我可以解决这个问题吗?顺便说一下,我确实有针对 css 的媒体查询:

@media screen and (max-width:380px) {
#HTML1{

}
#rectban{
position: relative;
width: 100%;
height: 120px;
margin-right: 6px;
background: #ffffff;
}

#ULBTN{
margin-top:-13px;
}.....

我确实尝试将 HTML1 的边距和填充设置为 0,并将它们的宽度和高度设置为 100%,但仍然没有用。请随时访问该页面并告诉我它是否放大。

最佳答案

尝试设置这个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

关于HTML 和 CSS 移动内容放大了吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41794130/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com