HTML适应手机浏览器宽度

<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="apple-mobile-web-app-capable" content="yes" />
<!--
设定iphone端页面全屏。
-->
<meta name="format-detection" content="telephone=no" />
<!--
取消数字被识别为电话号码。
-->

原文:http://blog.csdn.net/wusuopubupt/article/details/21941343

时间: 2024-08-06 19:43:46

HTML适应手机浏览器宽度的相关文章

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

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

手机浏览器都是按照什么分辨率解析移动端网页的

无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等. 本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议. 在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读"移动端网页开发基础". 各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句: <meta name="viewport" content="width=d

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

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

使用视 meta 标签来控制手机浏览器布局

移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看到页面的不同区域. 移动Safari浏览器推出了"视口元标记",让Web开发人员控制视口的大小和规模.许多其他移动浏览器都支持这个标签,虽然它不是任何Web标准的一部分.苹果公司的文档做得很好解释如何Web开发人员可以使用这个标签,但我们不得不做一些侦探工作,以找出究竟是如何实现它的Fen

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑. 那么问题来了,我们的网页不

手机浏览器兼容性测试结果概要

以下所说的"大多数"是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,"部分"为20%到50%:"少数"为20%及以下.而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征的手机,但并不代表所有手机的情况. XHTML部分 大多数手机不支持的: 表单元素的"disable"属性 部分手机不支持的: "button"标签 "input[type=file]&qu

一步使你的asp.net网站在手机浏览器上全屏显示

一步使你的asp.net网站在手机浏览器上全屏显示 1.问题 公司的asp.net网页在手机浏览器上初始化时显示的是缩放的页面,用户必须手动放大才能看清页面的字体,这样体验不好 2.解决 前段时间学习JQuery mobile 看到所有的demo页面都能全屏显示在手机上,页面上面都有这样一段代码: ? 1 <meta name="viewport" content="width=device-width, initial-scale=1"> 参数说明:

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

http://jingyan.baidu.com/article/656db918949b59e381249ce1.html 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content=&qu

把cookie以json形式返回,用js来set cookie.(解决手机浏览器未知情况下获取不到cookie)

1.继上一篇随笔,链接点我,解决手机端cookie的问题. 2.上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的url后面. 3.但是今天发现了新的问题,js取cookie存的sessionId为空,情况如下: (1)QQ浏览器能获取某些cookie,另一些cookie获取为空,猜测是后台Response SetCookie的时候,手机端浏览器没能良好的接受. (2)UC浏览器测试正常. (3)Safari情