账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    <meta name="viewport" content="width=980">在微信和safari中无效
    50
    0

    一个老项目的PC端页面,没有做移动端的兼容,所以期望在移动端的展示效果为完整的缩小的页面,可放大查看。但某一个页面在微信和safari加载过程正常,加载完之后会显示为<meta name="viewport" content="width=device-width">效果,导致页面中布局但宽度100%展示为设备宽度,但一些写死的宽度980,从而导致布局错乱。

    在其它浏览器中,默认是正常的,加了<meta name="viewport" content="width=device-width"> 之后,会展示微信相同效果,改为<meta name="viewport" content="width=980">后正常,但微信和safari无论怎么修改,都是错乱的。。。

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 灵亦邪 普通会员 1楼

      <meta name="viewport" content="width=980"> 这段代码是用来设置网页在移动设备上的视口宽度的,但是这里的写法可能在部分浏览器(如微信内置浏览器、Safari)中无法达到预期效果。

      现代移动浏览器更倾向于接受以下完整的 viewport 格式:

      html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

      这段代码含义是:

      • width=device-width:表示视口宽度等于设备屏幕宽度。
      • initial-scale=1.0:初始缩放比例为1,即页面加载时的缩放比例为1:1,不进行缩放。
      • maximum-scale=1.0:最大缩放比例为1,用户将无法通过双指缩放手势来放大网页。
      • user-scalable=no:禁用用户的缩放操作。

      如果你希望固定宽度为980px,可以尝试以下代码,但请注意,这可能会导致在小屏设备上显示不全或需要横向滚动:

      html <meta name="viewport" content="width=980, initial-scale=1.0">

      然而,由于响应式设计的普遍应用,建议采用第一种方式,让网页能够自适应各种屏幕尺寸。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部