手机版swiper轮播图，第一次访问没问题，刷新页面后，图片向右错位，只显示半张图片

如图

第一次访问，正常

刷新后访问，只显示半张图片

开始想的办法是，给图片加宽度100%改成固定宽度

然后刷新后变成

更不正常了。

f12打开浏览器调试模式，发现图片宽度是710px,而手机的实际宽度是414px

解决办法：

因为手机页面宽度单位用的是rem，然后通过js，根据不同手机的宽度，来定义body里面的font-size，不知道怎么的刷新页面的时候，swiper就先于js定义宽度了。

解决办法是swiper的父标签宽度不能用rem单位，可以用百分数

全屏是100%，两边有间距的话，可以用width:97%;margin:auto;

最终css

.swiperdiv_shop{
	margin-top: 1.25rem;
	width: 100%;
  margin-left:auto;
  margin-right:auto;
  height: 44.375rem;
	border-radius: 0.9375rem;
  overflow: hidden;
}
.swiperdiv_shop .swiper-container {
	width: 100%;
	height: 100%;
}
.swiperdiv_shop .swiper-slide {
	width: 100%;
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiperdiv_shop .swiper-slide img{
	width: 100%;
	height: 44.375rem;
}