移动设备中的网站元素和字体太小 [英] Website elements and fonts are too small in mobile devices

问题描述

我刚刚完成了我的新项目的设计和编码.但我需要它在手机上运行良好.我将屏幕调整为 350~400px 宽度，然后开始编码并向其添加一些媒体查询.在重新调整尺寸的浏览器中看起来很棒.我削减了一些元素和功能，一切都很好......直到我用我的智能手机测试它

I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone

屏幕不大.小于 4'(可能是 3.5).我在代码中添加了一些警报并意识到它的宽度是 980 像素.几乎比我在调整大小的浏览器上的测试大 3 倍.

The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.

一切都太小了.其他方面也很棒:媒体查询正在运行，我在代码中所做的剪辑也不错，但您几乎看不到我的手机中的内容.这当然不是我想要的.

Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.

我希望它看起来像一个应用，而且确实看起来像重新调整尺寸的浏览器上的应用.

I want it to look like an App and indeed it looks like an app on the redimensioned browser.

您如何创建响应式网站来处理此类问题?

How do you create your responsive websites to deal with problems like this one?

我阅读了一些关于使用 EM(并且有一种新的称为 REM)单位的内容，但我仍然对此感到非常困惑.我是否必须将所有 px 更改为 em?

I read something about using EM (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the px to em?

而且我知道你可以在 html 或 body 标签中设置 font-size 并且所有其他元素都将从它们继承.这是一种方法吗?你平时做些什么?有什么技巧什么的吗?我没有使用引导程序或任何其他前端框架.

And also I know you can set the font-size in the html or body tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.

推荐答案

您可以尝试添加 viewport 标签:

You can try adding the viewport <meta> tag :

<meta name="viewport" content="width=device-width, initial-scale=1">

• 使用视口元标记控制移动浏览器上的布局

这篇关于移动设备中的网站元素和字体太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！