web端网站转移至移动端页面,注意点如下:

1.首先引入viewport调整页面宽度

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.css中1px并不等于设备的1px

3.导图

原文转自:http://www.cnblogs.com/2050/p/3877280.html

http://weizhifeng.net/viewports.html

       http://weizhifeng.net/viewports2.html

【转】移动端viewport的使用的更多相关文章

  1. 移动端viewport解惑

    我们在做移动端webapp的时候需要设置这么一段: <meta name="viewport" content="width=device-width, initi ...

  2. 移动端Viewport & 使用rem来开发移动端网站

    Viewport大神 无双 的精彩解释 具体参数各型号是否支持参见: http://www.cnblogs.com/2050/p/3877280.html#commentform 摘录: 移动设备上的 ...

  3. 移动端 viewport设置

    <meta name="viewport" content="" /> width [pixel_value | device-width] wid ...

  4. 移动端viewport模版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  5. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  6. 你可能不知道的viewport

    概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是 ...

  7. web前端之移动端:知识汇

    移动前端自适应适配方法总结 移动端前端适配方案(总结) -- 面试重点 不要再问我移动适配的问题了 一.响应式布局: // Extra small devices (portrait phones, ...

  8. web开发中移动端适配

    这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...

  9. 深入浅出 Viewport 设计原理

    Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设 ...

随机推荐

  1. Windows、VS 与 .net

    原文地址:https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx .NET Framework version CLR ver ...

  2. Karma 4 - Karma 集成 Webpack 进行单元测试

    可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...

  3. Android如何使用NoHttp

    NoHttp 源码及Demo托管在Github欢迎大家Star: https://github.com/yanzhenjie/NoHttp NoHttp是专门做Android网络请求与下载的框架. N ...

  4. dedecms 打印出网站所有 文章标题和链接(URL)的方法

    {dede:arclist row="100000"} <li>[field:fulltitle/]***网站URL地址***[field:arcurl/]</l ...

  5. js复制input 框中的值

    function copy(){ var Url2=document.getElementById("copyValue"); Url2.select(); document.ex ...

  6. 解决ewebeditor for php在IE8下报editor.js错误的解决方案

    打开editor.js,寻找如下代码: if (element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()"); ...

  7. Java日志系统框架的设计与实现

    推荐一篇好的文章介绍java日志系统框架的设计的文章:http://soft.chinabyte.com/database/438/11321938.shtml 文章内容总结: 日志系统对跟踪调试.程 ...

  8. kindeditor编辑器的使用

    KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...

  9. HTML5基础

    一.HTML(超文本标记语言) 1>就是文本,由浏览器负责将它解析成具体的网页内容 2>由N个标签(节点.元素.标记)组成 二.常见HTML标签 1>标题标签:h1.h2.h3.h4 ...

  10. RESULT:0x80029C4A (TYPE_E_CANTLOADLIBRARY))

    无法将类型为"Microsoft.Office.Interop.Excel.ApplicationClass"的 COM 对象强制转换为接口类型"Microsoft.Of ...