[英]Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?
I have the issue that on mobile devices with a screen size less/equal 320px the content is not shown 100% wide which you can see in this image:我的问题是,在屏幕尺寸小于/等于 320 像素的移动设备上,内容未显示为 100% 宽,您可以在此图像中看到:
I have also uploaded the files here: http://files.ailola.com/tmp/v1/privacy.php我还在这里上传了文件: http://files.ailola.com/tmp/v1/privacy.php
I have been able to figure out the following points:我已经能够弄清楚以下几点:
Removing the linked stylesheet does not solve the issue neither.删除链接的样式表也不能解决问题。
I just do not figure out the reason.我只是不知道原因。 Do you have an idea?你有想法吗? Thanks so much for your help.非常感谢你的帮助。
There are multiple paragraphs
on your page which are overflowing container due to default word wrapping strategy.由于默认的自动换行策略,您的页面上有多个paragraphs
溢出容器。
To fix the issue apply either word-break or overflow-wrap style to your paragraph:要解决此问题,请对段落应用分词或 溢出样式:
p {
...,
word-break: break-all;
}
or或者
p {
...,
overflow-wrap: break-word;
}
I fixed this with the following:我用以下方法解决了这个问题:
@media only screen and (max-width: 320px)
#container {
max-width: inherit;
width: 100%;
padding: 0 1em;
word-break: break-word;
}
The problem is because, inside the content, you have links, those are like an entire word, so the container tend to adapt to the longest word (this issue is present in some languages that have long words or expressions).问题在于,在内容内部,您有链接,它们就像一个完整的单词,因此容器倾向于适应最长的单词(这个问题存在于某些具有长单词或表达式的语言中)。 In those cases, you have to use the property word-break
.在这些情况下,您必须使用属性word-break
。 You can find more info here你可以在这里找到更多信息
EDIT:编辑:
Apparently, the value break-word
of the property word-break
is deprecated.显然,不推荐使用属性word-break
的 value break-word
。 Also you can use the property overflow-wrap
with the value break-word
, as it is has a similar effect.您也可以将属性overflow-wrap
与值break-word
一起使用,因为它具有类似的效果。
Set initial-scale=1
inside the meta viewport tag in line number 6
在第6
行的元视口标签内设置initial-scale=1
We have to give width: 100%
to header, footer and #container.我们必须给 header、页脚和#container 提供width: 100%
。
The word-break property specifies how words should break when reaching the end of a line. word-break 属性指定单词在到达行尾时应该如何中断。
p {
word-break: break-word;
}
@media only screen and (max-width: 767px) {
header, footer, #container {
width: 100%;
padding: 0 25px;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.