-
html网页宽度自动适应手机屏幕宽度的方法展开全文
html网页宽度自动适应手机屏幕宽度的方法
web项目中经常会出现html页面需要自适应手机屏幕的情况。
可以通过设置屏幕的缩放比例来实现:
一、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
(1)、通过设置请求头实现:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。(2)、js动态生成mate标签
content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。
<script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script>对于此标签还有以下需要分享:
1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活(获取焦点)时，页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会，分享给大家。
二、百分比法，首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left:50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
三、使用css3单位rem，有人这样解释rem，root-em，就是根部的em，想必em大家都懂的，那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。到这里我们也就了解了rem的用法了，那么怎么用rem来实现不同尺寸屏幕的自适应呢?在页面载入开始时首先判断window的宽度(是window的宽度($(window).width())，不是屏幕分辩率的宽度(screen.width)，两者的差别请自行查阅)，假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，这样如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢?计算:div宽度dW2=dW1/100,px与rem之间很好换算，除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解释一下为什么把100作为一个缩放比例，用10或1不是更方便吗，这是因为大多数浏览器font-size的最小值为12px，所以只能用100了。所以会在头部加上这个JS代码
<script type="text/javascript"> var html = document.querySelector('html'); var rem = html.offsetWidth / 6.4; html.style.fontSize = rem + "px"; </script>四、媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。
-
一般网页宽度设置多少像素合适?
2013-03-25 18:01:401、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚 动条和垂直滚动条。 3、...展开全文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的色域很宽颜色范围很广，所以自然会有失色的现象
5、1024*768 下网页的尺寸:width=955,height=600
800 * 600 下网页的尺寸:width=760,height=420页面标准按800*600分辨率制作，实际尺寸为778*434px，
页面长度原则上不超过3屏，宽度不超过1屏.
每个标准页面为A4幅面大小，即8.5X11英寸
问:做网页一直用1003的，!这样在1024*768观看下刚好满屏不会出现横向滚动条!不明白为什么那么
多人说是1002满屏不是1003满屏!难道我的两个显示器都有问题?
答:如果你应用了XP的主题效果后，在IE下的宽度就只有1000，而给XP去除所有效果后，IE的水平宽度
就有1002了。(仅以1024×768为例)
准网页广告尺寸规格
一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的图像广告。
五、234*60，这种规格适用于框架或左右形式主页的广告链接。
六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
八、88*31，主要用于网页链接，或网站小型LOGO
==============================================================
目前，比较流行的网页宽度是960px左右，因为，这个宽度能兼容大部分显示器。下面讨论1024或更大宽度的情况下，先看下各大网站(如有错误，敬请指正):
新浪: 950 px
网易: 960 px
腾讯: 910 px
搜狐: 950 px
中学生学习网: 960 px
校内网: 960px
csdn: 960 px====================================================================
宽度:
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安全一点。
如果是800的分辨率一般都设成770。这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,
应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右,1024的设
定990左右.
=========================================================
1.一般设置 网页宽度 的数据
http://hi.baidu.com/lataing/item/c99de3a6f12899248919d3f62.一般网页宽度设置多少像素合适?
http://cha.xuexibbs.com/1377.html
3.各种分辨率下的网页宽度设置
http://oldlee11.blog.163.com/blog/static/445584532011225102932886/
-
A4纸网页打印 html网页页面的宽度设置成多少
2013-03-25 17:50:04最近开发项目时遇到了网页打印的问题，这是问题之二，打印宽度设置 在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。 经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非...展开全文最近开发项目时遇到了网页打印的问题，这是问题之二，打印宽度设置
在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。
经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi
A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸
所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。
但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。以下是我测试的各种页边距下，A4纸对应的象素尺寸:
打印页边距设定为 0mm 时，网页内最大元素的分辨率:794×1123
<div style="width:794px;height:1123px;border:1px solid #000000;"> </div>打印页边距设定为 5mm 时，网页内最大元素的分辨率:756×1086
<div style="width:756px;height:1086px;border:1px solid #000000;"> </div>打印页边距设定为 19.05mm 时，网页内最大元素的分辨率:649×978
<div style="width:649px;height:978px;border:1px solid #000000;"> </div>
附:
A4纸的尺寸:210×297mm
A3纸的尺寸:297×420mm
-
宽屏窄屏的网页宽度设置
2012-11-29 14:16:57当前的前端设计师有一个苦恼，就是用户屏幕显示分辨率的各不相同，并不能只按照一个模式设置网站的宽度，特别对于宽屏用户来说更为烦恼。 根据我的博客上月统计，1024×768分辨率的用户只占到50%，并且在逐月下降...展开全文当前的前端设计师有一个苦恼，就是用户屏幕显示分辨率的各不相同，并不能只按照一个模式设置网站的宽度，特别对于宽屏用户来说更为烦恼。根据我的博客上月统计，1024×768分辨率的用户只占到50%，并且在逐月下降，而1280-1440这三个分辨率的用户则达到了35%，如果按照这个速度发展下去，明年就会超过1024分辨率，这说明，使用17寸普屏的用户正在加速减少，而17、19寸宽屏用户正在稳步逐步增加，这给前端设计师的一个考验是，不能只考虑1024×768分辨率的用户了，要想想大屏幕宽屏用户的浏览体验了。
Google Reader是一个典型的内容阅读性质的网站，用户在上面阅读时间非常之长，那么，Google的前端设计师是怎么考虑这个问题的呢?
大家可以做一个实验，在19寸宽屏下，如果网站页面全文显示，铺满整屏，那么阅读的时候，眼睛需要从左转到右，才能阅读完一行，屏幕越大，这种效果越明显，因此，一个让用户大量阅读的网站，为了照顾好读者的眼睛，在大屏幕宽屏下，也不应该全屏铺开的显示文字内容。
在1024×768分辨率下，使用Google Reader时，会发现内容是全屏显示的，但是，使用19寸宽屏在1440×900分辨率下打开Google Reader，会发现这时并没有宽屏显示内容，右边留出了一大块空白，如下图显示。
使用工具测量宽屏下Google Reader的内容显示像素，结果是955个像素，很有趣的数字。
我在《更改博客页面宽度到960像素》一文中已经提到了，现在的网页设计的行业标准应该就是950/960像素宽度，这个宽度应该是人眼在不转动的情况下能看到的极限了，实际阅读区域正文的宽度是650像素，Google Reader的这个设计很有意思。
在Google搜索引擎中，搜索结果的显示宽度确是另外一个数字580像素，这是又一种内容宽度设计，Google这么做的原因估计是为了更好的显示右侧广告。
我的博客最初使用的是778像素这个宽度，在2008年的那次改版后，修改为878像素宽度，主要是为了修改方便，直接加了100像素，正文区域的阅读宽度是668像素，左侧侧栏宽度是200像素。不过，今年的改变，我的博客的整体宽度修改为960，正文区域的宽度是728像素，728的宽度仅仅为了好放Google AdSense而已。
-
html网页宽度自动适应手机屏幕
2019-12-06 10:10:42web项目中经常会出现html页面需要自适应手机屏幕的情况。 可以通过设置屏幕的缩放比例来实现: 一、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的... -
网页宽度一般设置多少才合适?
2018-09-16 13:18:56许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800600尺寸及1024768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.... -
iframe内嵌网页宽度自适应样式设置
2017-11-07 15:51:40DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta id="viewport" name="viewport" ... -
HTML网页设计自动适应屏幕宽度
2018-03-21 10:04:08https://yusi123.com/2539.html允许网页宽度自动调整“自适应网页设计”到底是怎么做到的?其实并不难。首先，在网页代码的头部，加入一行viewport元标签。<meta name=”viewport” content=”width=... -
如何设置HTML页面table(表格)自适应宽度，网页缩放问题
2020-07-01 16:41:03没有设置，那么网页缩放的时候就会出现以下情况。 解决办法: <table style="width:100%;table-layout:fixed;" class="Table1" runat="server"> <tr> <td style="width:15%;word-wrap:break-... -
网页宽度设定
2012-05-09 10:23:20网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的... -
HTML基础学习之 --网页的宽度、高度自适应
2016-07-17 00:12:00宽高自适应 我们在网页布局中经常要定义元素的宽高。但是我们如果定义宽高是一个定数时，当在不同的分辨率的电脑上打开的时候，往往会出现与屏幕不适应的情况，所以我们希望元素大小能根据窗口或子元素... 宽度自适 -
自适应网页有边框的行宽度怎么设置
2017-02-23 09:13:17DOCTYPE html> <html> *{ list-style: none; text-decoration: none; margin: 0; padding: 0; } div{ width: 100%; background: #008000; } p{ width: 25%; border-right: 1px ... -
手机网页宽度自适应屏幕宽度的方法
2014-10-09 18:03:45[html] view plaincopy ...meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=...在网页的中增加以上这句话，可以让网页的宽 -
html 表格单元格的宽度和高度的设置
2017-05-26 09:02:59详细地看了html中表格标签table的高度和宽度设置的细节，现总结如下: 1、table中的width和height设置及其作用:table中设置的height其实是设置个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会... -
如何让网页自适应屏幕宽度
2017-11-09 17:33:10viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个... -
iOS 让HTML网页内容和图片自适应UIWebView的宽度
2018-01-12 10:31:48加载网页的时候，有时候我们设置了[_detailsWebView setScalesPageToFit:YES] 这个方法，但是会根据网页界面的实际大小进行处理，致使展示的文字特别小，所以要做适应大小的处理; 方法一: /** * _infoModel.... -
网页宽度自动适应手机屏幕宽度的方法
2014-06-21 22:14:27[html] view plaincopy ...meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=...在网页的中增加以上这句话，可以让网页的宽 -
网页自适应屏幕宽度
2014-09-15 17:27:06于是，网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页内容? 手机的屏幕比较小，宽度通常在600像素以下;PC的屏幕宽度，一般都在1000像素以上(目前主流宽度是1366×768)，有的还达到... -
html编辑器如何设置上传图片的宽度
2015-09-07 10:36:49在html编辑器源码中如何设置上传图片的宽度,具体的js在哪,为什么我改的没用. ``` insertimage : function(url, title, width, height, border, align) { title = _undef(title, ''); border = _undef... -
如何设置文档最小宽度
2015-02-27 15:29:07项目需求:当浏览器窗口改变时, 窗口内容会变形, 所以需要将文档宽度设置为最小为900， 即当浏览器窗口宽度大于900时，文档宽度等于浏览器窗口宽度, 当浏览器窗口看度小于900时，文档宽度等于900. String path =... -
HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
2015-06-11 14:39:51一、允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于... -
iOS中UIWebview中网页宽度自适应的问题
2015-11-10 22:57:34有的网页中会使用""这个标签来设置网页的宽度，不过带来的问题是，如果展示这个webview的宽度不等于设备的宽度的时候，就会出现网页内容过宽左右可以滑动或者网页左右内容没有占满。找了一下，有两个解决方法: 1... -
如何设置HTML页面自适应宽度的table(表格)
2015-09-07 11:00:35HTML+CSS技术学习 https://www.itkc8.com WEB应用的页面，表格的表现...将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigt...
