- 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无论怎么修改,都是错乱的。。。
- 共 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">然而,由于响应式设计的普遍应用,建议采用第一种方式,让网页能够自适应各种屏幕尺寸。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
