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

转载 2013年12月04日 15:19:32

[html] view plaincopy
  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:表示用户是否可以调整缩放比例

 

如果是想要一打开网页,则自动以原始比例显示,并且不允许用户修改的话,则是:

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

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

在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 m...
  • yaoxiaosir
  • yaoxiaosir
  • 2014年02月10日 11:07
  • 1360

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

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

怎么让手机网站自适应设备屏幕宽度?

手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。 工具/原料...
  • smeller
  • smeller
  • 2017年04月28日 16:55
  • 954

Android网页宽度自适应手机屏幕宽度的方法

一、设置网页宽度自动调整 这个比较简单,只需要在网页代码的头部内加入一行viewport元标签。 viewport的说明: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽...
  • u013172063
  • u013172063
  • 2015年10月19日 11:37
  • 2731

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

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

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

html网页宽度自动适应手机屏幕宽度的方法
  • kerryqpw
  • kerryqpw
  • 2017年05月17日 09:42
  • 509

css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用

css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用转自:脚本之家 【css判断不同分辨率显示不同宽度布局实现自适应宽度】 http://www.jb51.ne...
  • CapMiachael
  • CapMiachael
  • 2016年10月12日 14:56
  • 29348

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

标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。   1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应...
  • haocm66
  • haocm66
  • 2016年07月27日 23:32
  • 2331

手机网页示例1——通过CSS的宽度百分比设置达到页面自适应效果

手机网页与传统PC网页存在很大区别的一点在于页面展示。 PC网页在布局方面常常会在两边“留白”——比如把网页的主要内容居中,然后两边通常不做布置(只是显示背景)。这是因为PC屏幕大,屏幕能显示的内容...
  • musilin7
  • musilin7
  • 2014年04月22日 22:47
  • 3517

不同宽度显示器下网页宽度的自适应

电脑显示器是有大有小,浏览器的最大宽度也是跟着显示器去的,可是网页呢,一般宽度都是定的死死的,好在现在800px宽的显示器基本上去淘汰了,所以网站页面基本上都是1000px的宽度,我的显示器是1440...
  • mz_start2016
  • mz_start2016
  • 2016年03月16日 16:49
  • 641
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页宽度自动适应手机屏幕宽度的方法
举报原因:
原因补充:

(最多只允许输入30个字)