viewport | 易学教程

Is the viewport meta tag really necessary?

阅读更多关于 Is the viewport meta tag really necessary?

问题 I've created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers. Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don't need to

web api DOM_02

阅读更多关于 web api DOM_02

创建元素的三种方式 document.write() 缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉 document.write('新设置的内容<p>标签也可以生成</p>'); innerHTML var box = document.getElementById('box'); box.innerHTML = '新内容<p>新标签</p>'; document.createElement() var div = document.createElement('div'); document.body.appendChild(div); 性能问题 innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。可以借助字符串或数组的方式进行替换，再设置给innerHTML 优化后与document.createElement性能相近 - 动态创建列表，高亮显示 - 根据数据动态创建表格模拟百度搜索文本框元素相关得方法: 只创建一个元素节点操作、* 节点的属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来) nodeType:节点的类型:1----标签,2—属性,3—文本 nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点----#text

响应式布局

阅读更多关于响应式布局

Viewport:是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。设置 Viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。响应式网格视图创建响应式网格视图接下来我们来创建一个响应式网格视图。首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box 。确保边距和边框包含在元素的宽度和高度间。添加如下代码： * { box-sizing: border-box; 来源： https://www

从网易与淘宝的font-size思考前端设计稿与工作流

阅读更多关于从网易与淘宝的font-size思考前端设计稿与工作流

　　从博主学习前端一路过来的经历了解到，前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题，这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案，希望能够帮助到一些从PC端转战web移动开发的小伙伴，因为是第一次写博文，写得不好的地方也希望大家多多包涵啦(*^__^*) 嘻嘻……（ps:文章有点长，如果你现在时间紧迫，那可以先收藏，等到有时间了再回头慢慢品尝喔）首先我们一起看看这篇打通博主web移动开发任督二脉的武功秘籍吧（以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容）：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了：它的页面有一个特点，就是：顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础

草珊瑚的css基础

阅读更多关于草珊瑚的css基础

首先要了解如下概念： viewport，窗口大小，containing block，block formatting context，inline formatting context，dirction和unicode-bidi，display和float以及postion的三者关系，盒子模型。一.viewport viewport是你所看到的窗口。它有两个重要属性，一个是css像素，另一个是设备像素。设备像素由分辨率决定，css像素由开发者决定。设备像素和css像素的关系有 1.重叠，即1css像素等于1设备像素。 2.缩小浏览器，一个设备像素覆盖多个css像素。 3.放大浏览器，一个css像素覆盖多个设备像素。设置width=device-width之后，一个css像素会占用多个设备像素，从而感觉上网页放大了。占用计算方式是，css像素=设备像素/(device-width)。二.窗口大小浏览器窗口的大小，一种带滚动条，另一种不带滚动条。不带滚动条的窗口宽高获取，document.documentElement.clientWidth和document.documentElement.clientHeight。带滚动条的窗口宽高获取，window.innerWidth和window.innerHeight。这些个属性获取到的是css像素。因此，当用户放大浏览器

前端学习之Bootstrap学习

阅读更多关于前端学习之Bootstrap学习

一，Bootstrap简介　　在前端世界，有个叫Bootstrap的家伙，，是twitter 开源出来的一套前端框架，利用Ta可以快速开发网站界面，它的特点就是比自己从头写简单，直观，方便，快捷，省劲。　　凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后我们才开始干活！　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML，CSS，JavaScript的前端框架，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师Mark Otto 和 Jacob Thornton 合作开发，是一个CSS / HTML 框架。Bootstrap提供了优雅的 HTML 和CSS规范，它是由动态的CSS语言Less写成的。　　它用于开发响应式布局、移动设备优先的 WEB 项目。　　我们去bootcdn （ https://www.bootcdn.cn/ ）。会发现Bootstrap是星最多的前端框架之一。二，常用Bootstrap组件链接 1，基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统 xs : 超小屏幕手机

flexible.js 移动端自适应方案

阅读更多关于 flexible.js 移动端自适应方案

一，flexible.js 的使用方式： github地址： https://github.com/amfe/lib-flexible 官方文档地址： https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。（一），引用方式 1，引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" ></script> 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中引入。建议对于js做内联处理，在所有资源加载之前执行这个js。下面是淘宝的写法： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta content="telephone=no,email=no" name="format-detection" /> <meta content="maximum

移动端小记

阅读更多关于移动端小记

视觉窗口： viewport，是移动端特有的，这是一个虚拟的区域，承载网页。承载关系浏览器----->viewport--------->网页适配要求 1.网页宽度必须和浏览器保持一致 2.默认显示的缩放比例和PC端保持（缩放比例1.0） 3.不允许用户自行缩放网页以上为国际上通用的适配方案，标准的移动端适配方案适配设置如果任何设置都没有，默认走的就是viewport的默认设置去设置新的viewport设置，达到设置要求。设置视口的标签，在head里面并且应该紧跟着编码设置 viewport功能 * 1. width 可以设置宽度 (device-width 当前设备的宽度) * 2. height 可以设置高度 * 3. initial-scale 可以设置默认的缩放比例 * 4. user-scalable 可以设置是否允许用户自行缩放 * 5. maximum-scale 可以设置最大缩放比例 * 6. minimum-scale 可以设置最小缩放比例 * 在<meta name="viewport" content=""> content="" 使用以上参数 * * 标准的适配方案：content="width=device-width,initial-scale=1.0,user-scalable=0" 快捷键：meta:vp + tab 非主流的适配方案

FastClick

阅读更多关于 FastClick

转自 https://www.jianshu.com/p/150c305f6930 为什么要使用FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。项目地址： https://github.com/ftlabs/fastclick FastClick的使用安装fastclick 安装fastclick可以使用npm，Component和Bower。另外也提供了Ruby版的gem fastclick-rails 以及.NET提供了 NuGet package 。最直接的可以在页面引入fastclick js文件。如：在页面直接引入fastclick.js <script type='application/javascript' src='/path/to/fastclick.js'></script> 使用npm安装 npm install fastclick 初始化FastClick实例初始化FastClick实例建议在页面的DOM文档加载完成后。纯Javascript版 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded',

Viewport width issue on responsive mobile template

阅读更多关于 Viewport width issue on responsive mobile template

问题 I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to

订阅 viewport