初始比例= 1.0 +宽度=设备宽度不能适应任何移动设备的整个屏幕 [英] initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

问题描述

所以我现在很困惑.我正在建立一个主题为精致"的响应式网站.它内置有meta标签

So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag

给我的印象是将整个内容设置在屏幕宽度上.在我的手机上，我必须缩小以使内容更好地显示.我尝试将初始比例值更改为0.65，使该网站在我正在开发的个人电话上看起来不错，但在iphone 6或其他设备上效果不佳.

Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have the content displayed somewhat nicely. I've tried changing the initial-scale value to 0.65 which made the site look nice on my personal phone which I am using to develop but it doesn't work well on the iphone 6 or other devices.

我一直在墙上撞脸，所以任何建议都将不胜感激

I've been bashing my face against the wall so any advice would be extremely appreciated

推荐答案

问题是主容器的宽度固定，而不是基于屏幕的自适应宽度.我的猜测是主题很烂！

The problem is the main container which has a fixed width, instead of adaptive width based on screen. My guess is that the theme is crap!

这里是解决方法:

*,
*:before,
*:after {
  margin: 0pt; 
  padding: 0pt;
  box-sizing: border-box;
}

.content-pad {
  width: 100%;
}

更具体地说，您只需要将此规则应用于小型设备，例如:

To be more specific, you'd have to apply this rule only to small devices like so:

/* Apply this width only to small devices */

@media only screen and (min-width: 320px) {
  .content-pad {
    width: 100%;
  }
}

由于CSS的特殊性，请确保更改主题的默认宽度或在宽度上附加!important.

Make sure you either change the theme' default width or append !important on the width because of css specificity.

这篇关于初始比例= 1.0 +宽度=设备宽度不能适应任何移动设备的整个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！