手机前端页面尺寸
2018-10-29 · 您的成功是我们最大追求!
关注
展开全部
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
以上是移动端的尺寸,单独的如果某一个移动的网站的尺寸是没有的,因为移动网站的一半情况是按照%比的尺寸 来自动适应屏幕的大小,或者也通过设置,iphone执行什么尺寸,安卓情况执行什么尺寸的。
网易云信
2023-12-06 广告
2023-12-06 广告
IM UI支持多种终端,包括但不限于:1. PC端:用户可以在个人电脑上使用IM UI进行聊天、文件传输、语音通话等操作。2. 移动端:用户可以在智能手机、平板电脑上使用IM UI,享受与PC端相同的聊天、文件传输、语音通话等服务。3. 浏...
点击进入详情页
本回答由网易云信提供
展开全部
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
Note2 360 * 567 (未隐藏URL与状态栏)
iPad 3/4 768*928 (未隐藏URL与状态栏)
GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
小米2A 360 *567 (未隐藏URL与状态栏)
HTC G10 320 * 460
<meta name="viewport"
网页手机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">
width - viewport的宽度 height -
viewport的高度
initial-scale - 初始的缩放比例
minimum-scale -
允许用户缩放到的最小比例
maximum-scale -
允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、网页手机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">
其中: width - viewport的宽度 height - viewport的高度 initial-scale -
初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
user-scalable -
用户是否可以手动缩放c
二、关于meta的详细介绍请参考
三、下文是关于Meta的例子的详细介绍 原文地址
3. Meta元素可视区
默认情况下,iPhone上的Safari会象在大屏幕的
桌面浏览器那样显示你的页面,宽度达到了980像素,然后缩小内容以适应iPhone的小屏幕,因此用户在iPhone看这个页面时感觉字体就比较小了,
也比较模糊,必须要放大才能看得真切,对于一个普通的Web页面似乎可以接受,但对于一个常用的应用程序就没几个人能够受得了。
幸运的是可以使用特殊的Meta元素可视区进行纠正:
<meta
name="viewport" content="width=device-width"/>
这个元素通知浏览器使用设备的宽度作为可视区的宽度,而不是默认的980像素了,我们可以看看两个不同的例子。
例3(链接:http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。
图 1 无可视区的显示效果
例4(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图
所示。
图 2 有可视区的显示效果
另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例
5(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。
为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:
<meta
name="viewport" content="width=780"/>
例6(链接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale –
用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
Note2 360 * 567 (未隐藏URL与状态栏)
iPad 3/4 768*928 (未隐藏URL与状态栏)
GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
小米2A 360 *567 (未隐藏URL与状态栏)
HTC G10 320 * 460
<meta name="viewport"
网页手机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">
width - viewport的宽度 height -
viewport的高度
initial-scale - 初始的缩放比例
minimum-scale -
允许用户缩放到的最小比例
maximum-scale -
允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、网页手机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">
其中: width - viewport的宽度 height - viewport的高度 initial-scale -
初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例
user-scalable -
用户是否可以手动缩放c
二、关于meta的详细介绍请参考
三、下文是关于Meta的例子的详细介绍 原文地址
3. Meta元素可视区
默认情况下,iPhone上的Safari会象在大屏幕的
桌面浏览器那样显示你的页面,宽度达到了980像素,然后缩小内容以适应iPhone的小屏幕,因此用户在iPhone看这个页面时感觉字体就比较小了,
也比较模糊,必须要放大才能看得真切,对于一个普通的Web页面似乎可以接受,但对于一个常用的应用程序就没几个人能够受得了。
幸运的是可以使用特殊的Meta元素可视区进行纠正:
<meta
name="viewport" content="width=device-width"/>
这个元素通知浏览器使用设备的宽度作为可视区的宽度,而不是默认的980像素了,我们可以看看两个不同的例子。
例3(链接:http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。
图 1 无可视区的显示效果
例4(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图
所示。
图 2 有可视区的显示效果
另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例
5(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。
为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:
<meta
name="viewport" content="width=780"/>
例6(链接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale –
用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
自己做一个嵌入js代码能报告当前浏览器尺寸的的html网页文件,让你的手机打开看看就知道了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询