手机端网页设计尺寸

在Window XP常见分辨率1024×768下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。

在Window 7常见分辨率1440×900下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。

于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

  • 320dp：一个普通的手机屏幕（240X320，320×480，480X800）
  • 480dp：一个中间平板电脑像（480×800）
  • 600dp：7寸平板电脑（600×1024）
  • 720dp：10寸平板电脑（720×1280，800×1280）

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI

时间： 2024-11-14 05:33:31

手机端网页设计尺寸的相关文章

手机端网页设计尺寸大小

手机端网页设计尺寸大小 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常见分辨率1024×768下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584. 在Window 7常见分辨率1440×900下我们除掉任务栏,浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716. 于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据

手机端网页web开发要点

1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,u

移动手机端网页布局 常用的3种方式 总结

手机端网页现在已经发展的非常迅猛,很多公司度需要网页能兼容各种不同尺寸屏幕的手机. 下面我给大家讲讲我常用的3放布局方式: 1:响应式布局. 可以用px作为像素,网页进行平铺.全屏的用100%.高度可以用px写死,宽度可以用百分比.不管网页怎么拉伸,高度不变,宽度会相应的扩大. 2:em/rem  方式布局. 可以设置好html,body的字体大小,然后用不同的尺寸手机访问的时候,我们可以去修改body的字体大小,网页(网页的内容用rem设置宽度.高度)的之内容会自动进行缩放. 代码如: bod

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

[共通]手机端网页开发问题及解决方法整理

Q1:手机端开发网页,界面适应问题.A1: <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> width - viewport的宽度 height - viewport的高度    initial-scale - 初始的缩放比例    minimum-scale - 允许用户缩放到的最小比

整理：手机端网页调试方案

(本文前身是技术分享的ppt,因此有些图直接是ppt导出的.画的图全是原创,转载请注明,谢谢.) 在手机端网页开发的特定阶段,需要查看手机端的界面.交互与体验.2011年时,开发时有很大麻烦: 相应的静态文件在测试服务器上,没有上线,需要绑定hosts而手机端直接绑定hosts是需要越狱/root的 有的手机浏览器根本不认hosts文件,如uc 手机端的调试工具匮乏断点调试.查看变量.查看样式等都很困难 在电脑端改变UA和屏幕大小,并不能简单的模拟手机端的情形.比如触摸的事件处理 在2012年后

手机端/网页 嵌套百度地图

网页嵌套几步到位: 地址:http://api.map.baidu.com/lbsapi/creatmap/index.html: 输入你想要定位的地点,添加标注,获取代码,拷贝到自己网页中即可. 但是体积大,在手机端很卡. 手机端效果图: 手机端嵌套: 代码如下: <html> <body> <legend>在线地图</legend> <div id='allmap' style='width:100%; height:360px'></

根据当前设备环境来做pc端和手机端网页显示

当你的网页使用了两套代码(移动端和pc端代码)来显示你的网页时,就需要用到这种方法: 手机端: if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "http://你的pc端网址"; } 电脑端: if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { wi