当前位置:首页 » 网页前端 » 手机web宽度
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

手机web宽度

发布时间: 2023-07-06 16:18:03

1. 移动端web在设计时宽度尺寸是多少合适

首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。
像素密度
要知道,屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如480x800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。刚好两倍,然而两款手机都是3.5英寸的。

2. 手机前端页面尺寸

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 - 用户是否可以手动缩放

参考:

一、网页手机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(链接:
viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。

图 1 无可视区的显示效果


例4(链接:
/viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图
所示。

图 2 有可视区的显示效果


另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例
5(链接:
/fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。

为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:

<meta
name="viewport" content="width=780"/>

例6(链接:/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。

Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale –
用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:

<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小

3. 手机前端页面尺寸

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执行什么尺寸,安卓情况执行什么尺寸的。

4. Web 页面采用多大的宽度最合适

Web 页面采用多大的宽度最合适

网页设计标准尺寸:
1. 800×600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2. 1024×768下,网页宽度保持在1002以内,如果满框显示的话,高度是612눯之间,就不会出现水平滚动条和垂直滚动条。
3. 在ps里面做网页可以在800×600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740×560左右。

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计.
网页的尺寸受限于两个因素:一个是显示器萤幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软体,就是我们常用的IE,遨游,Friefox等.
高度:
高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被外挂占了半个萤幕,所以高度没有确切值。
宽度:
1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001
注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计.
如果是800的分辨率一般都设成770。但也有设成760的.
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了外挂或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右.
网页设计标准尺寸:
1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.
页面标准按800*600分辨率制作,实际尺寸为778*434px
页面长度原则上不超过3屏,宽度不超过1屏
每个标准页面为A4幅面大小,即8.5X11英寸
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px
另外120*90,120*60也是小图示的标准尺寸
每个非首页静态页面含图片位元组不超过60K,全尺寸banner不超过14K
标准网页广告尺寸规格
一、120*120,这种广告规格适用于产品或新闻照片展示。
二、120*60,这种广告规格主要用于做LOGO使用。
三、120*90,主要应用于产品演示或大型LOGO。
四、125*125,这种规格适于表现照片效果的影象广告。
五、234*60,这种规格适用于框架或左右形式主页的广告连结。
六、392*72,主要用于有较多图片展示的广告条,用于页首或页尾。
七、468*60,应用最为广泛的广告条尺寸,用于页首或页尾。
八、88*31,主要用于网页连结,或网站小型LOGO。
广告形式 画素大小 最大尺寸 备注
BUTTON 120*60(必须用gif) 7K
215*50(必须用gif) 7K
通栏 760*100 25K 静态图片或减少运动效果
430*50 15K
超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果
巨幅广告 336*280 35K
585*120
竖边广告 130*300 25K
全屏广告 800*600 40K 必须为静态图片,FLASH格式
图文混排 各频道不同 15K
弹出视窗 400*300(尽量用gif) 40K
BANNER 468*60(尽量用gif) 18K
悬停按钮 80*80(必须用gif) 7K
流媒体 300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)
网页中的广告尺寸
1.首页右上,尺寸120*60
2.首页顶部通栏,尺寸468*60
3.首页顶部通栏,尺寸760*60
4.首页中部通栏,尺寸580*60
5.内页顶部通栏,尺寸468*60
6.内页顶部通栏,尺寸760*60
7.内页左上,尺寸150*60或300*300
8.下载地址页面,尺寸560*60或468*60
9.内页底部通栏,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*10

1.65主频的cpu用多大的 显示卡 最合适 还有 多大的记忆体 最合适

您好。 建议您 用128MB的显示卡 和1G记忆体 本身您的CPU主频就不是很高 如果用好点的显示卡 和高点的记忆体 就浪费了

橱柜拉篮宽度选择多大最合适?

橱柜拉篮一般是根据您家橱柜吃尺寸来定做的,深度42cm的常用橱柜拉篮尺寸:600柜体为52.3*14cm,700柜体为62.3*14cm,750柜体为66.6*14cm,800柜体为72.3*14cm等,深度45.5cm的常用橱柜拉篮尺寸(:600柜体为56.5*20cm,700柜体为66.5*20cm,750柜体为71.5*20cm,800柜体为76.5*20cm等

淘宝手机详情页面宽度到底多少最合适咧?

手机萤幕尺寸有大有小,宽度480 – 620画素会比较合适。格式为JPGGIFPNG。当需要在图片上新增文字时,中文字型大于等于30号字,英文和阿拉伯数字大于等于20号字。

4.2米宽的客厅用多大的电视最合适

电视距离适宜在3米左右,根据沙发到电视的距离来决定。
1.7米使用26英寸
2米使用32英寸
2.4米使用37英寸
2.5米使用40英寸
2.7米使用42英寸
3米使用46英寸
3.3米使用52英寸

用多大的鱼缸养银龙最合适

按尺寸来说 最小尺寸是一米 宽40 银龙体长不得超过40 如果银龙体长超过50 就建议一米二宽50以上的缸子养了 一米五 一米八 两米都能养 越大越好呗

金毛用多大的狗窝最合适

如果你养的是金毛犬,那就更该如此了,要让它知道,白天当然不用说,夜晚这就是它睡觉的地方,不许它想在哪儿睡就在哪儿睡。
对于金毛犬来说,给它指定了一个住处,让它在想躺的时候也能随便在那儿伸伸腰,也算比较自在。
狗屋没必要十分讲究,只要宽敞就好。其实用个纸箱子或者木箱子在上面铺块毛巾也行。若买商店里卖的狗屋,则有条件在客人来访前,事先将金毛犬关起来,的确很方便。
狗屋应放置在安静、偏暗点儿的地方,最好选在冬暖夏凉、通风避晒之处,可能的话冬季和夏季应选在不同的地方。
也可以用铁笼子代替狗屋
要是你们家足够敞的话,也可以在屋里准备一个铁笼子,里面同时可以放上便器和金毛犬睡觉的窝。有一种能摺叠的铁笼子,可以很方便地拆运安装,天气好时还可以把金毛犬连笼子挪到院子里晒晒太阳。

中星九号用多大的锅最合适

目前用小锅接收中星9号的人占百分之九十九以上,因为它上面有免费的46套央视及省级卫视节目。其它卫星如亚太5号、新天11符和韩星5号上面节目少,也没有多大的收看价值。最小的小锅直径35厘米左右。 中星9号位于西南方向.应该影响不大。

86用多大轮胎最合适

1.抓地力增加。2。增加车身高度,3增加行车稳定性。4.油耗增加。5。对轮毂,内衬,转向角度,有影响!

5. 移动端Web页面适配方案(整理版)

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发,由于手机 屏幕尺寸 分辨率 不同,或者需要考虑 横竖屏 问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ,通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备,即 <meta name = 'applicable-device' content = 'mobile'> ,在 <meta> 标签中的 viewport 标签中设置 width ,通过 js 动态修改标签的 initial-scale 使得页面等比缩放,刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位,这种方案实现简单,不存在兼容性问题,但用户体验很不友好。

后面出现 流式布局 ,使用百分比 % 定义宽度,高度使用 px 固定,根据可视区域大小实时进行尺寸调整,通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单,但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形,字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题,出现了 弹性布局 。这种布局方案下,包裹文字的元素的尺寸采用 em/rem 为单位,页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ,页面的主要划分区域使用 px 和百分比,包裹文字的元素和文字采用 em 。

上面的这几种方案下,页面元素的大小按照屏幕分辨率进行适配调整,但是整体布局不变,对于 响应式web设计 ,网页布局会随着访问它的视口及设备的不同呈现不同的样式,在实现上可能会以上多种方案的结合,同时搭配 媒体查询 技术使用,使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果,如 mashable 。

[TOC]

像素,是屏幕上显示数据的最基本的点,表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样,是因为像素点的个数相同情况下,不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字,在 1366×768 显示屏下会显示的小,在 1024×768 显示屏下会相对大。也称为 物理像素(设备像素 ),是分辨率的尺寸单位。

印刷行业常用单位,能够使用测量设备测得的长度,等于 1/72 英寸。

在不同屏幕上, css 像素呈现的物理尺寸一致,但 css 像素对应的物理像素具数不同。标准的显示密度下, 1 个 css 像素对应一个物理像素,缩放时, 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度,每英寸所拥有的像素数。值越高,显示画面细节越丰富。计算公式为: ,其中 和 是分辨率的宽高, 是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个,值越高,图片越细腻。

设备物理像素和设备独立像素比 ,即 是指在理想布局宽度,使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取,css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

<meta> 标签中定义了一些元数据信息,通过设置 <meta name = "viewport"> ,提供有关 视口初始大小 的信息,供 移动设备 使用。属性值为

移动端涉及 布局视口 (Layout Viewport)、 视觉视口 (Visual ViewPort)和 理想视口 (Ideal ViewPort)。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的,屏幕每行的像素 * 每列的像素点数,单位是 px 。

设备独立的,软件可以达到的,个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于 倍率 ,如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素,如果在普通屏中其设备像素等于 css 像素,但在一些高清屏中,如 Retina 显示屏,一个css像素对应 2 或 3 个设备像素,这时显示出来的元素会变小。为了让元素如期待显示,需要传入 原始设计稿尺寸 × 倍率 的设计稿,根据 DPR 的定义,这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上 源码 分析

视口 是浏览器中用于呈现网页的区域,移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位,包括 文本 布局高宽 间距 等,使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准,转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 多个屏幕 ,让网站的布局和功能随用户的使用环境(屏幕大小、输出方式、设备/浏览器能力而变化),使其视觉合理,交互方式符合习惯。如使得内容区块可伸缩与自由排布,边距适应页面尺寸,图片适应比例变化,能够自动隐藏/部分显示内容,能自动折叠导航和菜单。

6. 制作一个手机web前端

制作一个手机web前端:

工具:智能手机,普通智能手机:320×480竖版。

节省样式的加载

目前而言,要改变网站的配色方案或者写iPad专用的样式表,是通过如下代码:

可以通过下面这个方法去加载指定分辨率下的样式,当使用相应的设备,才能加载到相应的样式表。

meta标签,即CSS媒体查询

强制让文档的宽度与设备的宽度保持1:1;

文档初始化缩放衡雹并比例是1:1;

不允许用户点击屏幕放大浏览;

允许用户缩放到咐迹的最大比例尤其要注意的是content里多个属性的设置一定要用分号空格来隔开,如果不规范将不会起作用。

CSS3-webkit相关的HTML5标记元素的使用功能

消除被点击元素的外观变化,所谓的点击后高亮。

阻止旋转屏幕时自动调整字体大小。

解决字体在移动端比肆腔例缩小后出现锯齿的问题。

appearance属性使元素看上去像标准的用户界面元素。

鼠标可以悬停在内容上(指向该内容)而不激活它(单击它)。

使用自适应模式布局

safari都能够正常的显示网页内容(也就是自适应),而且自适应之后也不用考虑分辨率的问题。

javascript库

方法一:

有很多设备的“”都大于1.5或者等于2(window.=物理像素/dips)。移动端webapp上CSS要为Retian屏幕准备另外的图片及代码。

方法二:

7. web网页设计尺寸标准(最小宽度/尺寸)

综上所述,电脑屏幕分辨率1024px,低于1024px则不再考虑,所以以上网站设计网站的最小宽度/尺寸小于1000px;