当前位置: 首页 > news >正文

微信网站注意事项

var bIsAndroid = navigator.userAgent.toLowerCase().match(/android/i) == "android";

手机屏宽度高度不一

由于手机屏大小不一,所以H5页面所承载的设计图相应的宽高也会不一样,是否需要设计多套不同的设计图以适应不同的手机屏?
最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸,但这样需要大量的人力与时间,而且维护成本太高,不符合大部分团队的实际情况。
 
典型的手机屏尺寸如:
\
导航栏+iphone状态栏高度: 64px
 
iphone4
屏幕总宽度: 320px
屏幕总高度: 480px
微信网页可视高度: 416px
 
iphone5
屏幕总宽度: 320px
屏幕总高度: 568px
微信网页可视高度: 504px
 
iphone6
屏幕总宽度: 375px
屏幕总高度: 667px
微信内网页可视高度: 603px
 
iphone6 plus
屏幕总宽度: 414px
屏幕总高度: 736px
微信网页可视高度: 672px
 
samsung galaxy note3 (三丧手机开发者的黑洞。。)
导航栏+Android状态栏高度: 73px
屏幕总宽度: 360px
屏幕总高度: 640px
微信网页可视高度: 567px
 
仅iphone就4个尺寸了,更别说Android阵营的手机了
 
特别注意:以上不是手机的分辨率单位,而是普通电脑上浏览网页时的像素,这和客户端Native制作有很大的区别。
比如iphone4,宽度就是320px像素,高度为480px,如果以实际分辨率来设计即640*960来排列设计,实际在H5页面显示时会显得很小。

转载于:https://www.cnblogs.com/mrt-yyy/p/4720934.html

相关文章:

  • iOS 9应用开发教程之显示编辑文本标签文本框
  • pip常用命令
  • scala学习之类和对象
  • 志于道,志之所趋,无远弗届
  • LeetCode Divide Two Integers
  • iOS学习路线图
  • 阿里内推面试
  • ajax和json详解
  • ip地址合法性
  • Appium 的安装启动
  • thinkphp框架中处理标签中条件输出
  • CSS3实现图片循环旋转
  • TCP/IP详解 卷一(第十四章 DNS:域名系统)
  • Java连接Oracle数据库
  • JN5139 zigbee 资料
  • gops —— Go 程序诊断分析工具
  • JAVA 学习IO流
  • linux安装openssl、swoole等扩展的具体步骤
  • Nacos系列:Nacos的Java SDK使用
  • nodejs:开发并发布一个nodejs包
  • orm2 中文文档 3.1 模型属性
  • spring security oauth2 password授权模式
  • 关于for循环的简单归纳
  • 前端存储 - localStorage
  • 前端代码风格自动化系列(二)之Commitlint
  • 自制字幕遮挡器
  • 走向全栈之MongoDB的使用
  • #{} 和 ${}区别
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (九)One-Wire总线-DS18B20
  • (一) springboot详细介绍
  • (转)关于pipe()的详细解析
  • .gitignore文件_Git:.gitignore
  • .htaccess配置重写url引擎
  • .Net FrameWork总结
  • .net通用权限框架B/S (三)--MODEL层(2)
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • ??eclipse的安装配置问题!??
  • [2016.7.Test1] T1 三进制异或
  • [Android 数据通信] android cmwap接入点
  • [AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的(上传/下载)
  • [Bada开发]初步入口函数介绍
  • [C++]C++基础知识概述
  • [CF407E]k-d-sequence
  • [javaSE] GUI(事件监听机制)
  • [poj3686]The Windy's(费用流)
  • [RISC-V]verilog
  • [Shell]Linux常用快捷键
  • [uni-app] 小程序码转为二维码, 小程序解析此码获取数据
  • [Unity] Unity3D研究院编辑器之独立Inspector属性
  • [VSCode] VSCode 常用快捷键
  • [超全汇总]数据结构与算法技巧(一)前缀和与差分数组详细刷题笔记附源码思路
  • [翻译]PyCairo指南--裁剪和masking