为啥我的网站无法在手机上扩展？
Posted
技术标签:
【中文标题】为啥我的网站无法在手机上扩展？【英文标题】：Why is my site not scaling on my mobile phone?为什么我的网站无法在手机上扩展？ 【发布时间】：2016-09-28 22:13:07 【问题描述】：我已经尝试了所有我能想到的让这种布局适合移动设备的方法，但它似乎并不想工作。我已经放了视口，元标记。我已经放了@media css标签，还是没有区别。
这完全让我感到困惑，为什么这不起作用。
这里是 html/CSS：
</title>
<style>
@font-face
font-family: 'trench';
src: url('fonts/trench100free.ttf');
.content
width: 480px;
overflow: hidden;
.trench-bold
text-align: left;
font-family: trench;
font-size: 55px;
font-weight: bold;
color: white;
.pull
margin-bottom: 2px;
font-size: 150%;
font-family: trench;
font-weight: bold;
-webkit-transition: .5s ease;
transition: .5s ease;
width: 180px;
padding: 5px;
color: black;
background-color: white;
text-align: right;
.pull:hover
-webkit-transition: .5s ease;
width: 80%;
background-color: red;
text-size: 175%;
transition: .5s ease;
body
margin: 0px;
a
text-decoration: none;
color: black;
a:active
color: black;
@media screen and (max-width: 400px)
.content
width: 100%;
.pull
width: 50%;
.pull:hover
width: 90%
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body background="index_background.png">
<div class="content" align="left">
<section class="trench-bold">/The Goust Server</section>
<br>
<a href="downloads.html"><div class="pull">Downloads</div></a>
<a href="links.html"><div class="pull">Links</div></a>
<a href="links.html"><div class="pull">About</div></a>
<br><br><br><br>
<section class="trench-bold">/Pages</section>
<br>
<a href="samsworld.html"><div class="pull">Sam's World</div></a>
</div>
</body>
【问题讨论】：
当您扩展到移动视图时，您希望看到哪些实际变化？ 我想要'下载'，'链接'，'关于'和'sam的世界'来扩展到手机，所以选择按钮时，它们将扩展到90％的时间屏幕。我还希望文本可以缩放。 【参考方案1】：其实可以的，试试chrome开发工具的设备模式，设置任意小设备，或者直接调整浏览器的窗口大小。
【讨论】：
我试过了。当我在网站上检查谷歌上的响应式网站时，该网站的图片根本不适合。当我实际检查我的手机时，它不起作用。 嗯，我只是将它复制并粘贴到一个文件上，然后在 chrome 上打开它。它对我有用。【参考方案2】：问题是：悬停行为在触摸屏设备上不存在。 阅读：How do I simulate a hover with a touch in touch enabled browsers?
【讨论】：
甚至不是这样。它确实存在，当你按住它时，它就会膨胀。问题是元素的缩放。Also I wanted the text to scale. 然后你应该改变文本的字体大小。 .pull:hover font-size: 200%;
我在几分钟前尝试过。它似乎只会使文本整体变大。我希望它与屏幕完美缩放。此外，由于某种原因，元标记似乎被完全忽略了。
不存在 css 属性调用 'text-size: 175%' 存在。您应该将 css 更改为 'font-size: 175%;'。
如果您想在移动视图中缩放字体。您应该将字体大小添加到@media screen and (max-width: 400px)。【参考方案3】：
看，在触摸设备上“悬停”效果不起作用。您必须使用一些 javascript / JQuery 来实现此效果并相应地修改 CSS 和 HTML 代码。
[相反，您可以使用 :active 代替 :hover，但这只是部分解决方案。]
你也可以试试下面的JS代码：
<script>
document.addEventListener("touchstart", function(), true);
</script>
除此之外，我强烈建议您浏览以下链接，这将帮助您了解问题以及可用于实现悬停效果的各种解决方案。
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
J.Joe 提供的链接也会有所帮助。
【讨论】：
好的，我试过了。我已经添加了那个JS，但仍然没有。它是网站本身的规模，而不是悬停效果。规模不匹配任何移动设备，任何尝试创建响应式网站的代码行似乎都没有任何帮助，上面给出的 html 和 css。以上是关于为啥我的网站无法在手机上扩展？的主要内容，如果未能解决你的问题，请参考以下文章