微信页面打开显示的样式与手机浏览器打开显示的样式不一样

手机wap2.0页面优化：禁止iPhone浏览器缩放
最新推荐文章于 2025-08-20 18:33:55 发布
原创 最新推荐文章于 2025-08-20 18:33:55 发布 · 1.6w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

部署运行你感兴趣的模型镜像
  1.    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  2. 在<head>中加入这一句
  3. 网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">   
  5.   
  6. width - viewport的宽度 height - viewport的高度   
  7. initial-scale - 初始的缩放比例  
  8. minimum-scale - 允许用户缩放到的最小比例   
  9. maximum-scale - 允许用户缩放到的最大比例  
  10. user-scalable - 用户是否可以手动缩放 

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

meta name="viewport" content="width=device-width,initial-scale=1.0"理解
yiyueqinghui的博客
01-23 3万+
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域 content属性值 width:设备可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...
h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新
Beatingworldline的博客
08-06 1998
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
h5页面 判断网页是否由微信或qq内置浏览器打开
学习记录
01-28 5862
function is_weixn_qq(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return "weixin"; } else if (ua.match(/QQ/i) == "qq") { ...
H5———IOS安卓微信中显示样式不同、IOS点击无反应
weixin_45629623的博客
04-26 1762
样式问题 两个系统在微信浏览器中显示不同，主要原因是两者默认样式标准不同，当你没有指定样式的时候，他就会以默认样式呈现。所以一般你在PC浏览器看到的会和手机上看到的不一样。 例子：比如color你没指定、font-size没指定，button标签的边框有时候指定了还是会变的，所以用div会比较好。 IOS点击无反应 IOS那边是需要指定css那个小手样式才能点击的。（但不是全部都无法点击，只是无法点击的部分设置这个就可以正常点击了，我也不懂，希望评论区大佬指教，我当时是div绑定的点击事件） 修改鼠标性状
移动前端开发之viewport的深入理解
热门推荐
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
<meta name="viewport" content="width=device-width
tianyitianyi1的专栏
06-26 1979
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。       width - viewport的宽度 height - viewport的高度   initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例  user-s
html5开发之viewport使用
weixin_34378767的博客
08-30 1244
2019独角兽企业重金招聘Python工程师标准>>> ...
关于＜meta name=“viewport“ content=“width=device-width,initial-scale=1.0“＞的解释
wuxingwuyou的博客
10-08 2423
1、名词解释2、viewport 语法介绍：3、target-densitydpi 属性的 取值范围 注意：所有的缩放值都必须在0.01–10的范围之内 3、target-densitydpi 属性的 取值范围 1、device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。2、high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。3、medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设
微信浏览器打开css样式不一样
12-28
### 解决微信浏览器中的CSS样式显示不一致问题 #### 一、了解微信浏览器特性 微信内置浏览器基于WebKit引擎，尽管其渲染机制与Safari相似，但仍存在一些特有的行为模式和局限性。这些差异可能导致相同网站在其他...
js插件方式打开pdf文件(浏览器pdf插件分享)
10-26
注意，在使用JavaScript插件显示PDF文件时，开发人员需要确保插件与所使用的浏览器兼容，以提供最佳的用户体验。此外，随着Web技术的快速发展，应该定期检查各个插件的更新和维护情况，避免在项目中使用过时或不再...
微信小程序显示富文本编辑器的内容的工具
06-06
在微信小程序中显示富文本编辑器的内容，通常涉及到数据的后端处理和前端渲染。本工具是专门为了解决这个问题而设计的，允许小程序从后台数据库获取由富文本编辑器编辑的内容并进行展示。 1. **富文本编辑器**：富...
记一个微信公众号开发h5遇到的样式问题
_小郑有点困了的博客
12-10 2247
效果如图： 解读一下，就是发布成功之后，在移动设备上，发现底部有一条透明的区域，不规则，不固定，安卓设备使用全面屏手势就会出现。更改虚拟按键（常规的屏幕返回键，home键）模式就不可见。 一：以为是设备兼容的问题，底部内边距之类的东西 尝试把底部抬高，以为是类似于ios设备下方的安全区，采取抬高的方式试一下，未果。无论底部如何调高，这个东西都在原地不动 兼容ios底部安全区做法： vue适配全面屏底部安全区 <meta content="width=device-width,initial
viewport的meta标签 <meta name="viewport" content="
aa88342249的博客
11-29 269
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
wuyujin1997的博客
05-17 3074
Code <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, ...
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
chenxue843400447的博客
06-14 1936
jsp中&lt;head/&gt;中的&lt;meta/&gt;标签中发现这句话，不太明白。记录下来。&lt;meta content="width=device-width, initial-scale=1, maximum-scale=1"&gt;       width=device-width 可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被...
一些关于Viewport与device-width的东西～
weixin_30374009的博客
11-01 631
进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。比如： 我们经常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什么意思，...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
zeroone001的专栏
08-26 4205
在编写Bootstrap前端的时候遇到了这行代码，
移动端视口 meta 标签：width=device-width, initial-scale=1.0 究竟在做什么
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-20 1270
布局视口用于排版和计算 CSS 布局，可视视口是用户当前看到的那一块区域。二者在缩放、软键盘弹出等场景下可能大小不同。例如在 Chrome 108 起的 Android 上，软键盘出现时只会缩小可视视口而不再改动布局视口，从而避免vh等视口单位抖动；如需恢复旧行为，可通过扩展的关键字显式选择。
Meta
ljxqsq的专栏
03-25 539
一、网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。 其中： width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scal
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值