微信内置浏览器分辨率

最新推荐文章于 2024-04-24 16:04:42 发布
最新推荐文章于 2024-04-24 16:04:42 发布
阅读量4.7k 收藏
点赞数 1
文章标签： 微信 chrome 浏览器 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zljvsmx/article/details/70169569
版权

最近在写移动端项目，算是自己第一次写整站的移动端项目吧，REM+百分比响应式布局

但是在手机上测试的时候显示还是不对，这是为什么呢？

因为用chrome自带模拟器是没有把屏幕顶部，也就是手机信号电量那一栏算在内的，这就导致做出来的效果跟模拟器不一致

所以我一般会在chrome自己设置几个微信内置浏览器的分辨率，这个分辨率在IPHONE自带的safari浏览器上也是一样的


分辨率如下：

iPhone4 320 x 416
iPhone5 320 x 504
iPhone6 375 x 603
iPhone6 Plus 414 x 672


宽度没变化，主要是高度变了

zljvsmx
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【微信小程序】微信小程序学习笔记（每日更新ing_20180523打卡）
睹物思理
05-17 1248
（以《微信小程序开发入门与实践》（雷磊 清华大学出版社）为主要学习资料）1、app.json文件中页面路径前不要加/2、图片尽量不要存储在小程序的目录中。（因为小程序的大小不能超过1MB，超过则无法真机运行和发布项目。应该将图片都存放在服务器上，让小程序通过网络来加载图片）3、设置display：flex是应用一切弹性布局属性的先决条件，如果不设置display：flex，那么后续的其他相关弹性布...
如何判断微信内置浏览器(通过User Agent实现)
09-04
在进行微信公众账号开发的时候，需要知道当前的浏览器是微信内置的浏览器，那么如何判断呢？这是就只有通过浏览器的User Agent来进行判断了
vue 解决在微信内置浏览器中调用支付宝支付的情况
01-18
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数（因为在微信里是不能直接调用支付宝的需要调用外部浏览器） 3.在外部浏览器中完成支付跳转页面 第一步： payment: 是选择支付页面，pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码： let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == “micromessenger” 这两句代码就是判断用户是否是用微信内置浏览器打开的页面 如果
微信小程序|开发实战篇之十三---小程序布局/组件/屏幕适配问题
Rookie1012的博客
03-14 2916
适配除去一些固定组件的屏幕高度1、小程序屏幕适配2、解决方案3、使用效果 1、小程序屏幕适配 例如：iPhone5、iPhone6/7/8、iPhoneX/XR等屏幕大小问题。或者如下布局被按钮组件覆盖问题。 分析：这两种问题其实都是一样的解决方案。有些组件给予它固定的width和height会导致在不同型号的手机会有遮挡变形之类。下图是因为container布局的大小与底部固定的按钮覆盖了（position:fixed） 2、解决方案 不同型号的手机遇到组件、布局等变形了，多半是没有考虑使用rpx，或
IOS 适配的几种模式
iteye_14589的博客
05-24 1616
1.尺寸适配 1.原因 iOS7中所有导航栏都为半透明，导航栏（height=44）和状态栏（height=20）不再单独占用高度，即View的(0,0)坐标是从屏幕左上角开始的；而在iOS7之前的系统中，导航栏和状态栏单独占用高度，即View的(0,0)的坐标从导航栏下面开始的。 解决方案: 1> 修改window的frame坐标 这个思路是在iOS7系统里面把w...
2023年最新最全uniapp入门学习，零基础入门uniapp到实战项目，unicloud数据后台快速打造uniapp小程序项目
热门推荐
编程小石头
11-03 2万+
零基础入门uniapp的开发
移动端H5页面、微信H5页面、App开发屏幕适配参考
编程架构三分天下：分层、分治、分时序。
05-12 7417
以前做手机屏幕适配的时候喜欢拿iPhone 5S作为标准，5S的屏幕分辨率是640*1136。 一般来说，状态栏占据12的高度，标题栏占据48的高度，总计60。iPhone 6S屏幕分辨率：750*1334 6S Plus屏幕分辨率： 1080*1920......
适配 iPhone13、iPhone13 pro、iPhone13 proMax
祝我们都能在鸡零狗碎的生活里，找到自己的快乐~
10-08 1335
适配 iPhone13、iPhone13、iPhone13 proMax 机型分辨率： iPhone13、iPhone13Pro、iPhone13ProMax的屏幕分辨率分别为1170X2532像素、1170X2532像素、1284X2778像素 代码： BOOL s_isIphone13 = NO; BOOL MFIsiPhone13_13pro = ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSiz
iphone常见机型微信网页可视高度
weixin_30871905的博客
05-16 1982
导航栏+iphone状态栏高度： 64px = 导航栏44+状态栏20 iphone4 / 4s 屏幕总宽度: 320px 屏幕总高度: 480px 微信网页可视高度: 416px iphone5 / 5c / 5s /se 屏幕总宽度: 320px 屏幕总高度: 568px 微信网页可视高度: 504px iphone6 / iphone 7 屏幕总宽度...
移动端首屏设计
学如逆水行舟，不进则退
12-26 4314
首屏范围 首屏范围 首屏安全范围区域：640832px（宽高） 手机端网页首屏安全范围:640x832.是根据目前iphone的尺寸来设定，以iphone4屏幕的尺寸640x960，减去状态条 与浏览器的头部，以此得出的安全高度。 在设计页面时，需要把主要的视觉，操作按钮放在首屏范围内。1008的高度 为iphone5的高度，设计时可以把次要视觉，信息延展到10
合格前端系列第七弹-移动端开发踩过的一些坑
weixin_33895604的博客
10-24 593
2019独角兽企业重金招聘Python工程师标准>>> ...
解决微信内置浏览器返回上一页强制刷新问题方法
12-02
微信内置浏览器在返回上一页面，且上一页面包含AJAX代码时，页面就会被强制刷新，极度影响用户体验。而我们想要的效果是：返回上一页面时，页面还停留在原来的状态，AJAX获取到的数据还在，滚动条也在原来的位置。 ...
微信内置浏览器图片查看器的代码实例
10-16
主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Adnroid 微信内置浏览器清除缓存
12-19
然而奇怪的是微信app在IOS中是可以刷新页面的，但是Android中却不知道基于什么考虑，无法清除缓存也没有刷新功能，这个就给开发者设置了不小的障碍，哪有页面是最好就不改的，然后如果去改，微信浏览器缓存着css、...
js 制作qq、微信 的表情
最新发布
pig_ning的博客
04-24 91
js 制作qq、微信 的表情
SVG 绘制微信订阅号icon
a940659387的博客
04-24 216
【代码】SVG 绘制微信订阅号icon。
小成本搏大流量：微信/支付宝小程序搜索排名优化
柚鸥ASO优化服务商
04-17 581
随着移动互联网的快速发展，小程序已成为企业和个人开发者重要的流量入口和业务承载平台。而小程序搜索排名则是影响小程序曝光量、用户获取及业务转化的关键因素。小柚在本文和大家探讨如何制定有效的优化方案，提升小程序在搜索结果中的排名。
Linux:进程控制
m0_61088872的博客
04-20 1168
WNOHANG: 若 pid 指定的子进程没有结束，则 waitpid() 函数返回 0 ，不予以等待。然后 shell 读取新的一行输入,建立一个新的进程,在这个进程中运行程序 并等待这个进程束。options==WNOHANG，非阻塞等待：对子进程进行检测，子进程没退出，直接返回0。参数： status 定义了进程的终止状态，父进程通过 wait 来获取该值。参数：status 定义了进程的终止状态，父进程通过wait来获取该值。当正常返回的时候 waitpid 返回收集到的子进程的进程 ID；
zabbix6.4告警配置(短信告警和邮件告警)，脚本触发
m0_51453764的博客
04-24 670
zabbix邮件告警和短信告警详细步骤介绍。
chrome模拟微信内置浏览器
09-19
Chrome浏览器可以模拟微信内置浏览器的功能，通过一些设置和扩展来实现。首先，在Chrome浏览器中，我们可以使用开发者工具来模拟各种移动设备的页面展示效果，其中包括了模拟微信内置浏览器的设置选项。我们可以在Chrome的开发者工具中选择“切换设备工具栏”，然后选择“Custom...”选项，手动输入设备的尺寸和UA字符串等信息，来模拟微信内置浏览器的页面展示。 其次，Chrome浏览器中有一些扩展可以帮助模拟微信内置浏览器的一些特性和行为。例如，Chrome Web Store中有一款名为“WeChat Desktop”的扩展，可以将web页面以微信内置浏览器的方式展示，包括页面宽度、字体大小、自动检测电话号码和微信表情等特性。 另外，Chrome浏览器的开发者工具还提供了一些调试功能，帮助开发者模拟微信内置浏览器的环境。通过这些调试功能，开发者可以在Chrome中进行移动端页面的开发、调试和测试，确保页面在微信内置浏览器中的正常展示和功能运行。 总结来说，通过Chrome浏览器的开发者工具和相关扩展，我们可以模拟微信内置浏览器的页面展示效果和功能行为，方便开发者进行移动端页面的调试和测试工作。这样可以提高开发效率和代码质量，确保页面在微信内置浏览器中的良好用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值