手机网页自适应问题

  手机自适应宽度

  向head标签里加上一下代码即可(不足之处,宽度适应里,高度却未必适应)

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  viewport是网页默认的宽度和高度

  上面这行代码的意思是:

  网页宽度默认等于屏幕宽度(width=device-width),

  原始缩放比例(initial-scale=1)为1.0,

  即网页初始大小占屏幕面积的100%。

    width=device-width :表示宽度是设备屏幕的宽度

    height=device-height:表示高度是设备屏幕的高度

    initial-scale=1.0:表示初始的缩放比例

    minimum-scale=0.5:表示最小的缩放比例

    maximum-scale=2.0:表示最大的缩放比例

    user-scalable=yes:表示用户是否可以调整缩放比例

时间: 2024-10-05 05:32:00

手机网页自适应问题的相关文章

【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习. 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片素材按照640px*330px像素设计,放入img,并且img设置了铺满全屏style: .img{ width:100%; height:16.5rem; ] PS:我将html设置了 html{ font-size:20px; } 所以按照rem的算法,img的高度应该是330px/20px=16.5rem(rem

手机网页宽度 , 图片宽度 自适应

网页宽度 页面box不要写宽度或 width:100% 之类的 去掉 头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f

手机web——自适应网页设计

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"

手机web——自适应网页设计(html/css控制)(转)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样的网页是怎样改制作出来的呢?今天我们就来探讨一下这个问题 阅读读者具备基础 1.熟练的使用HTML和CSS 2.对HTML5和CSS3有一定的了解,这个不必深入 3.掌握JavaScript.jquery脚本语言 如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了 HTML的

!!!手机网页开发

移动篇: @media screen and (min-width:540px){#news_detail .pinglun-form { margin:0 auto;width: 540px;}}@media screen and (max-width:540px){#news_detail .pinglun-form { margin:0 auto;width: 540px;}}@media screen and (max-width:320px){#news_detail .pinglun

对移动端手机网页设计提出的一系列问题(移动端问题总纲)

以下是本人从事移动端开发的工作总发现并总结的一些问题, 后期会陆续给出一些答案,帮助大家能够更轻松的解决移动端BUG,也欢迎大家提供更好的解决方案 联系邮箱 [email protected]喻文强 1.移动端字体样式引用 ttf 2.手机网页引用过大字体包会不会卡,如何解决 3.有时候希望字体比12px更小,如何解决 4.字体常用色考量,文本信息色.标题色.banner导航文字色.警告色.链接色. 5.对于手机网页使用微软雅黑,文字400过细,文字500过粗的文字处理方法 6.手机网页的地址导

网页自适应屏幕

网页自适应手机.电脑屏幕的设置方法 <head> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel=&