<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%",整个页面在设备上看起来就是全屏的了。

网页宽度自动适应手机屏幕宽度的方法相关推荐

  1. html网页宽度自动适应手机屏幕宽度的方法

    html网页宽度自动适应手机屏幕宽度的方法 web项目中经常会出现html页面需要自适应手机屏幕的情况.可以通过设置屏幕的缩放比例来实现: 一.使用meta标签,这也是普遍使用的方法,理论上讲使用这个 ...

  2. html 自动适应手机屏幕大小,网页宽度自动适应手机屏幕宽度的实现代码(viewport)...

    原标题:网页宽度自动适应手机屏幕宽度的实现代码(viewport) 一般的写法如下: XML/HTML Code复制内容到剪贴板 较多的写法: XML/HTML Code复制内容到剪贴板 1. 在网页 ...

  3. 网页宽度自动适应手机屏幕宽度的实现代码(viewport)

    一般的写法如下: XML/HTML Code复制内容到剪贴板 <meta name="viewport" content="initial-scale=1.0&qu ...

  4. html宽度等于手机宽度,网页宽度自动适应手机屏幕宽度的方法

    问题描述 今天通过手机预览了一下目前正在做的网站,发现完全不是自己期望的效果,如下 但是PC端预览是Ok的. 解决方案 方案一 为手机端开发一个站点.判断当前是不是手机访问,然后跳转到相应的网站. f ...

  5. html网页宽度自动适应手机屏幕

    web项目中经常会出现html页面需要自适应手机屏幕的情况. 可以通过设置屏幕的缩放比例来实现:一.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对 ...

  6. 自动适应手机屏幕宽度的方法

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  7. 移动端H5页面自适应手机屏幕宽度

    https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...

  8. 移动页面自适应手机屏幕宽度

    关于移动页面自适应手机屏幕宽度的一点总结[站在巨人的肩膀上] 使用meta标签 最常用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所 ...

  9. flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

最新文章

  1. ajax 与php页面取值,在同一页面中使用PHP和AJAX的最佳方法
  2. 用lambda对std::list排序 - 力为的技术博客 - C++博客
  3. 编译包含Google Play服务App的SDK版本问题
  4. egret.Shape渲染集合图形
  5. twisted 安装时,安装顺序为 zope.interface -twisted
  6. java线程 stop()_java 多线程5: java 终止线程及中断机制 (stop()、interrupt() 、interrupted()、isInterrupted())...
  7. 互联网产品一网易网站设计(思想)
  8. android 屏幕长宽,怎么获取手机屏幕长宽
  9. linux那些事之页迁移(page migratiom)
  10. fscanf()函数详解
  11. 用requests库和BeautifulSoup4库爬取新闻列表
  12. 香港电影回顾之年度经典(1980——1999)
  13. Mybatis 框架CRUD的操作 案例
  14. java判断是否是英文_Java 判断输入是否为英文字符
  15. audio或video标签的autoplay属性的说明
  16. 宝宝痰湿体质——家长该如何调理
  17. JWT strings must contain exactly 2 period characters. Found: 0(JWT字符串必须正好包含2个句点字符。找到:0)
  18. GUI的演化和python编程——Python学习笔记之二十二
  19. 编写程序计算圆的面积和周长。
  20. mysql 评价表设计_来聊聊mysql单表评论系统怎么设计

热门文章

  1. 数据还有5纳秒抵达战场,漫画数据中心高速网络
  2. iWatch4苹果手表 联通eSIM移除配对后的问题的解决方法
  3. 【毕业设计】39-基于单片机的智能小车寻迹系统的设计与实现(原理图工程+仿真工程+源代码+答辩论文+答辩PPT)
  4. [卷积算子加速] im2col优化
  5. SPRO里关于采购的配置
  6. Lesson41_SpringBoot
  7. 远程CG动画制作的神器:RayLink远程控制软件
  8. leetcode839相似字符串组
  9. flutter天气_flutter天气预报APP
  10. HDU1465 不容易系列之一