相关疑难解决方法(0)

将iPhone X旋转到横向时,封面图像的左侧和下方会出现空白区域

今天发生了一个奇怪的问题.在测试一个简单的"即将推出"页面时,我的iPhone X上的背景图像在旋转到横向时不会填满整个视口.在Chrome和Safari中测试过.

产生问题的简化示例:

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE HTML>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>

	<body>
		
	</body>

</html>

Run Code Online (Sandbox Code Playgroud)

正如您在浏览器中看到的那样,渲染效果很好.在肖像中,它渲染得很好.在景观中没那么多.查看截图.

更新:无法在iPhone 7上重现这一点.只是iPhone X.

html5 cover responsive-design responsive

Tim*_*rom

2018 05-23

5
推荐指数

1
解决办法

2108
查看次数

两个CSS问题 - 一个只发生在移动设备上,一个发生在Chrome上

[链接删除]在iPhone上,顶部横幅不会一直拉伸.解？

继承人截图:![在此处输入图片说明] [1]

这是我应用于div的CSS:

#banner {
    background-color: #F7F7F7;
    background-size: cover;
    box-shadow: 0 0 30px 2px #DCCFBF inset;
    display: inline-block;
    height: 200px;
    width: 100%;

Run Code Online (Sandbox Code Playgroud)

问题2.在chrome中,当我调整浏览器窗口大小时,底部的两个导航图标会移动(图形设计和社交媒体).我把它们放在一个容器中试图将它们保持在适当的位置,但它仍然会发生......仅限于镀铬.我意识到整个网站都在移动,但导航中的其他图标会在一段时间后停止,而底部的图标会重叠,看起来很糟糕.有什么建议？

html css iphone mobile

meo*_*ers

2012 11-21

0
推荐指数

1
解决办法

234
查看次数