【用浏览器模仿手机访问网页显示正常。用真实的手机访问页面，盒子的背景图片会发生偏移 _chrome开发者工具】

用浏览器模仿手机访问网页显示正常。用真实的手机访问页面，盒子的背景图片会发生偏移

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

chrome开发者工具

详细描述

截图

代码

.firstone,
.finallyone{
    width:12px;
    height:12px;
    padding:0;
    background-image:url("calendar2.png");
    background-repeat:no-repeat;
}
.firstone{
    background-position:0 -36px;
}
.finallyone{
    background-position:0 -60px;
}
p{
    margin:0;
    padding:0;
}
.first,
.finally p{
    line-height:14px;
    color:#999;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.first{
    background-position:left -42px;
    margin-bottom:0.5rem;
    padding-left:0;
}
.second {
    font-size:1.6rem;
    margin-bottom:0.5rem;
}
.second p{
    padding-left:2rem;
    line-height:1.5rem;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.finally{
    background-position:3px -74px;
}
.main {
    height:7rem;
    border-bottom:1px solid #ccc;
    padding:1rem;
}
.salary{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:5rem;
}
.salary p{
    color:#f00;
    padding-right:0.5rem;
    margin:0;
    font-size:1.8rem;
    white-space: nowrap;
}
.salary a{
    display:inline-block;
    width:1rem;
    height:1.5rem;
    background-image:url("矢量智能对象拷贝.png");
    background-repeat:no-repeat;
    background-size:0.8rem;
}

<div class="container-fluid headerr">
    <div class="row header">
        <div class="col-xs-offset-3 col-xs-6 button">
            <button  type="button" class="btn btn-default1">找雇主</button
            ><button type="button" class="btn btn-default2">找护工</button>
        </div>
        <div class="col-xs-3 map">
            <button type="button" class="btn btn-link"></button>
        </div>
    </div>
</div>

编辑于2024-09-08

时间排序

热门排序

[深圳|结业弟子]JS-钟俊
0

可能性1：未设置viewport属性：
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
而且css中的1px并不等于设备的1px，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素；
这个时候我们就需要设置viewport属性了，通常我们的设置是：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />；
//这里解释一下：width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放

可能2:如果第一条设置了的话，还有一种可能就是这个调试页面可能只是模仿了手机分辨率，还需要更改UA，模拟手机设备和系统。
UA，即User Agent(用户代理)。不同浏览器、同一浏览器的不同版本、手机浏览器、电脑端的浏览器的UA都是不一样的。
手机与浏览器的UA标识不同，网页的排版也不同，这里我对UA的了解还是比较少，你可以去百度了解下；

查看全部>

编辑于2018-08-24

去第页