Ⅰ html5里面怎样自动适应手机屏幕的高度
有两种
1.通过设置viewport参数
2.使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。
<</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
Ⅱ 怎么让自己的网页自己适应手机屏幕
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
2
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
3
将以上标签加入之后保存，再用手机打开即是自适应网页了。
Ⅲ 如何让一个pc页面自动适应手机屏幕
在网页的<head>中增加一个meta标签：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
可以让网页的宽度自动适应手机屏幕的宽度。
其中：
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” />
Ⅳ pc端和移动端屏幕自适应
做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。
1、最小尺寸分辨率1024 768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度。
2、1024 768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度。
3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签。
4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了。
5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。
6、宽度自适应为不同宽度显示器写布局元素时常用的css。
Ⅳ CSS如何让网站适应手机屏幕
并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。
你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况
这种情况你可以使用media标签来做自适应
@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}上面代码的意思是当页面宽度小于400px的时候 就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果
Ⅵ 如何让网站自适应手机
关于网站如何做到自适应网页，可根据如下操作：
首先，在网页代码的头部，加入一行viewport元标签。<metaname=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩 放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
Ⅶ 如何让网页自动适应手机屏幕大小 ，求方法，若有代码更好，谢谢
在网页的选项菜单里有“设置”-“缩放模式”/“适应屏幕”这两个选项，不同手机大同小异，你自己看需要选吧。
Ⅷ 如何制作适合手机屏幕大小的网页
网络站长平台里添加你的网站，里边有个站点属性设置，设置类型点击自适应。当然这个是自动设置自适应手机大小，可能没那么完美，有问题可以继续问我。
Ⅸ 做好了网页，怎么让它自适应手机屏幕
首先，在网页代码的头部，加入一行viewport标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。
其次：网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以width:auto;
第三，流动布局.left{float: left;width: ***%;}
第四，选择加载css这是自适应的关键部分.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px} }/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */@media screen and (max-width: 1200px) { .abc {width: 900px} }
设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */@media screen and (max-width: 901px) { .abc {width: 200px;} } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */@media screen and (max-width: 500px) { .abc {width: 100px;} }
设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。