如何让网页自适应屏幕大小

Posted 2023-04-25

想要网页宽度自适应，需要把网页元素宽度设置为百分比，还要在网页头部加上代码：<metaname="viewport"content="width=device-width,initial-scale=1.0"/>。

图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：img width:100%; max-width:100%;。

改进功能

浏览器首次使用时，根据用户显示分辨率大小决定是否默认显示收藏栏；

打开多个标签关闭浏览器时，提示用户确认；

搜索栏关键词提示；

搜索栏支持多个搜索引擎；5.内核窗口resize速度

参考技术A 1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body
font: normal 100% Helvetica, Arial, sans-serif;

上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1
font-size: 1.5em;

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small
font-size: 0.875em;

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。 参考技术B 这位网友你好，想要网页宽度自适应，你需要把网页元素宽度设置为百分比，还要在网页头部加上代码：
　　图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：
img
width:100%;
max-width:100%; 参考技术C 用响应式布局，可以看看bootstrap框架，它做的就很好 参考技术D .indexcontentbackground:#FF6600;width:100%;height:467px;text-align:center;margin: 0; 这样就一直全屏了

怎样让苹果手机浏览器放大后文字部分自适应屏幕

浏览网页时，部分网页文字太小了，但是将网页放大后，文字部分就超出手机边框了，需要左右拖动网页才能看到相关内容

浏览器现在应该还达不到这种高度，所以可以选择一款调节字体的浏览器。像我一直在用的手机QQ浏览器就可以对字体进行大小调节，这样应该就可以根绝边框的大小来进行调节了，可能看起来会更方便一些。并且它用起来也挺不错的，不仅性能稳定，而且速度还很快。用它阅读小说可以选择一键缓存到手机上，非常方便。喜欢的话就可以下载下来用用。 参考技术A 我用的也是苹果的，但是我认为他的功能和网页都不如我现在使用的手机qq浏览器，因为太简单了，使用起来也不方便，像我现在用的手机Qq浏览器我感觉很好用，它是采用的腾讯最新研发的X5内核超极速系统，所以在上网的时候速度还是很快的，领完一个就是他的模式支持的种类也是很多的，像你说的这个就可以直接进行设置就可以，所以还是很方便的。 参考技术B 1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
如果你完全不了解这个标签的使用需要先百度一下。
解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。
对于此标签还有以下需要分享：
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)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

2、第二种自适应屏幕尺寸的方法是将页面做成980宽度，在没有viewport标签的情况下，移动设备屏幕范围会显示页面980的宽度，如果页面大于980，则在屏幕范围内显示页面一部分，如果页面小于980，则页面居中两侧显示空白，那么你猜，如果页面宽度等于980会出现什么情况呢？

3、百分比法，首先应明确，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

4、使用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了。

5、媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) .icon some styles ;这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。 参考技术C 你好，什么意思，现在手机内置的浏览器的版本都是最简版的，搜索东西经常会出现卡顿，闪退问题，更不可思议的有时向搜索的根本就不会进入网页，特别难用，现在的浏览器太多了，有的功能的其它方面都更不错，用起来最起码好用，就现在的手机qq浏览器就有太多网友在用，都一致反映它很棒，用起来也方便，实用性特强，家在网页速度超快，根本就没有什么等过，安全设施也做得很到位，用着也很放心。