wap网页自适应宽度 wap
程序员文章站
2022-03-10 14:02:19
...
Html head 标签当中加入viewport标签
<metaname="viewport"content="width=100%; initial-scale=1.0; maximum-scale=1.0;user-scalable=0;" />
关键属性:viewport
什么是viewport?
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,这样会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。手机浏览器也基本支持。
Viewport属性介绍: width - viewport的宽度 initial-scale - 初始的缩放比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
另外body内容以table方式布局,可以保证不同分辨率自适应后的美观。
推荐阅读
-
WAP手机网页浏览器唤起微信
-
CSS网页布局入门教程5:二列宽度自适应
-
移动版Wap网页针对百度进行SEO优化的一些要点总结
-
CSS网页布局入门教程6:左列固定,右列宽度自适应
-
CSS网页布局入门教程8:三列浮动中间列宽度自适应
-
CSS网页布局入门教程2:一列自适应宽度
-
如何在手机浏览器wap网页中点击链接跳转到微信界面
-
wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose
-
wap网页 - thinkphp3.0项目 已经有了pc端 如何添加移动版网站?
-
wap网页,QQ浏览器显示正常,UC浏览器CSS没加载_html/css_WEB-ITnose