技术

Laravel 关联模型由于名称一致性导致的问题 Laravel 核心:控制反转(Inversion of Control)和门面模式(Facade) 回退Mac上用Brew安装的PHP版本 为PHP设置服务器(Apache/Nginx)环境变量 PHP中的魔术方法和魔术常量简介和使用 ROC曲线 设计模式详解及PHP实现 MySQL大量数据插入各种方法性能分析与比较 Laravel中使用Redis作为队列系统的工作流程 使用Supervisor来管理你的Laravel队列 在Laravel中使用自己的类库三种方式 用Laravel+Grunt+Bower管理你的应用 从运行原理及使用场景看Apache和Nginx 了解GitHub工作流【译】 PHP Socket的使用 Apache 日志文件格式及简单处理 Python脚本--下载合并SAE日志 PHP命名空间及自动加载 基于CSS3实现尖角面包屑 部署Ceilometer到已有环境中 OpenStack Ceilometer Collector代码解读 OpenStack Ceilometer数据存储与API源码解析 OpenStack Ceilometer中的Pipeline机制 OpenStack Ceilometer Compute Agent源码解读 学习Python动态扩展包stevedore 学习Python的ABC模块 Python包管理工具setuptools详解 OpenStack Horizon 中文本地化 WSGI学习 在虚拟机单机部署OpenStack Grizzly 学习使用python打包工具distutils python包工具之间的关系 给OpenStack创建Ubuntu镜像 OpenStack Grizzly Multihost部署文档 为什么使用pip而不是easy_install HTML中meta标签viewpoint的作用 交互式编程-IPython 页面提速之——数据缓存 给OpenStack创建Win7镜像 Ceilometer的命令行使用 部署一个ceilometer-horizon项目 给OpenStack创建Windows XP镜像 几种企业的存储系统 概念模型、逻辑模型、物理模型的区别 五中常见的开源协议整理(BSD,Apache,GPL,LGPL,MIT) OpenStack监控项目Ceilometer的一些术语 VNC和远程桌面的区别 OpenStack Ceilometer项目简介 虚拟化与云计算中KVM,Xen,Qemu的区别和联系 调试和修改OpenStack中的Horizon部分 JavaScript变量作用域 kanyun worker原理 kanyun server服务 在OpenStack中部署kanyun kanyun的api-client命令 sae下的python开发部署和一个简单例子 OpenStack Nova内部机制【译】 PHP可变变量 JS中防止浏览器屏蔽window.open PHP操作Session的原理及提升安全性时的一个问题

标签


HTML中meta标签viewpoint的作用

2013年05月06日

debug过程

1.在web上浏览的时候,响应式布局是好用的,放大缩小页面都可以实现页面变更,但是在手机上调试的时候死活不能用

2.因为css中@media是根据window的宽度来控制css的,所以我尝试输出了一下在window变更的时候window的width,结果发现PC上使用时一切正常,而手机上输出的一直是980。

原因很简单,手机上的浏览器是全屏的,我手机实际宽度是320像素,而我手机分辨率是980宽度,所以手机上打出来的是980而不是320

3.增加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以后发现手机window的width变为320了,即预期效果

viewpoint说明

  • width 控制viewpoint的宽度,可以是固定值,也可以是device-width,即设备的宽度
  • height 高度
  • initial-scale 控制初始化缩放比例,1.0表示不可以缩放
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例

可见如果不定义viewpoint的话,页面宽度以屏幕分辨率为基准,而设置以后可以根据设备宽度来调整页面,达到适配终端大小的效果

参考

Using the viewport meta tag to control layout on mobile browsers