html - 在移动设备上保持页面宽度相同

标签 html css responsive-design viewport

在我的页面上,我没有使用任何视口(viewport)设置。 我只为页面的全部内容使用了 25% 的 leftright margin。问题是,当我从移动设备访问它时,宽度与手机屏幕的宽度相匹配,并且有 25% 的边距,它变得非常难看。中间只有一些文字。

我想做的是,让页面不适合手机屏幕。我想保持相同的大小。就像大多数页面一样。

我该怎么做?

最佳答案

您要存档的移动设备是什么? 25% 的左右边距它是非常相关的,每个样本:iphone 中的 25% 边距看起来是一种方式,平板电脑中的 25% 边距看起来也完全不同。

您需要使用 CSS3 媒体查询

尝试阅读 https://www.w3schools.com/css/css3_mediaqueries.asp

您可以使用以下方法在 chrome 中进行测试:测试响应式和设备特定的视口(viewport)

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

希望对您有所帮助。

关于html - 在移动设备上保持页面宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42242691/

相关文章:

更改浏览器窗口的分辨率大小时,CSS 媒体查询不起作用

iphone - iframe 内容显示在 iOS 上的 iframe 之外

java - 如何删除分隔符内的空间?

CSS transform 绝对翻译

html - 以 HTML 格式显示 Django 查询结果 - 表格、列表、CSS div?

jquery - 响应缩放图像

html - 响应式设计 : meta tag loading

html - 如何在导航栏上放置 Logo

javascript - 在父范围内跟踪多个非重复的 Angular Directive(指令)

html - 最小 Div 大小?