viewport/流式布局
2016-08-09 11:56
113 查看
在《京东商城》移动站中是用的是百分比自适应布局,也就是流式布局。
同时,需要对移动端的viewport视口 进行设置。就能达到适配的目的。
网页呈现在viewport里,在viewport呈现在浏览器中,控制viewport层,使其放大缩小。而且能设置是否允许用户自行缩放。
同时,需要对移动端的viewport视口 进行设置。就能达到适配的目的。
viewport 概念
在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大,缩小。而且能设置是否允许用户自行缩放。网页呈现在viewport里,在viewport呈现在浏览器中,控制viewport层,使其放大缩小。而且能设置是否允许用户自行缩放。
<head lang="en"> <meta charset="UTF-8"> <!-- m viewport 只有移动端才识别--> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" /> <title></title> </head>
<head lang="en"> <meta charset="UTF-8"> <!-- viewport 只有移动端才识别,在PC端不认识viewport--> <!-- 设置宽度 width 设置成和设备一样的宽度 width = device-width 设置默认的缩放比例 initial-scale = 1.0 设置是否允许用户自行缩放 user-scalable=0/no 1/yes --> <!-- 总结 用meta标签把viewport的宽度设为device-width,同时initial-scale = 1.0 user-scalable=0就构建了一个标准的移动web页面。 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <title></title> <style> body { margin: 0; padding: 0; } div{ <!-- 宽度百分比,流式布局,像两侧扩展--> width: 100%; margin: 0 auto; height: 1000px; background:red; } </style> </head>
viewport 参数
width : 宽度设置的是viewport 宽度。可以设置device-width特殊值。 [code]initial-scale : 初始缩放比,大于0的数字。 maximum-scale : 最大缩放比,大于0的数字。 minimum-scale : 最小缩放比,大于0的数字。 user-scalable : 用户是否可以缩放,yes或no(1或0);
相关文章推荐
- 使用ScrollView属性fillViewport解决android布局不能撑满全屏的问题
- ExtJs布局之viewport
- 使用meta标签的【viewport】控制在移动设备上的布局
- 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)
- Ext.ViewPort布局
- ScrollView属性fillViewport解决android布局不能撑满全屏的问题
- 为什么不使用默认的980px的布局Viewport
- Ext.Viewport xtype 布局
- Extjs4.2布局——Ext.container.ViewportView
- EXTJS布局示例(panel,Viewport,TabPanel)(带图)
- Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtJs4 笔记 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- 移动端布局:视口viewport的理解
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- EXTJS布局示例(panel,Viewport,TabPanel)
- PyGobject(四十)布局容器之Viewport
- 使用 viewport meta 标签在手机浏览器上控制布局
- viewport meta 标签在手机浏览器上控制布局
- viewport和流式布局
- 移动端布局(viewport)方法