移动端viewport模版】的更多相关文章

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name…
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:/…
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据.不过,从传输量方面来看,返回 HTML 不划算,而在 web 传输方面,现在更多的是使用 JSON 而不是 XML. 浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就想死了,需要很小心很小心地写出几乎无法维护的 Ja…
通用模版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes"…
我们在做移动端webapp的时候需要设置这么一段: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 再配合媒体查询@media就可以写出适配各种手机端的页面了.但是,为什么就能够了呢? 网上查了很多资料,反复看了很多遍还是似懂非,知道看了知乎中一个问题的解答,茅塞顿开. 自己不明白三个点,其…
<!DOCTYPE html><html><head> <title>时钟</title> <meta charset="utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta ht…
Viewport大神 无双 的精彩解释 具体参数各型号是否支持参见: http://www.cnblogs.com/2050/p/3877280.html#commentform 摘录: 移动设备上的viewport: 设备的屏幕上能用来显示我们的网页的那一块区域 设备像素比: docment.devicePixelRatio = 物理像素 / 独立像素 在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素. 一些设备上浏览器的默认…
<meta name="viewport" content="" /> width [pixel_value | device-width] width 直接去设置具体数值大部分的安卓手机不支持的 但是IOS支持 user-scalable 是否允许缩放 (no||yes) initial-scale 初始比例 minimum-scale 允许缩放的最小比例 maximum-scale 允许缩放的最大比例 target-densitydpi -- dpi…
粉笔网iPhone端使用的第三方开源库 前言 最近有朋友问我粉笔网 iPhone 端使用了哪些第三方的开源库.我在这儿整理了一下,分享给大家. ASIHttpRequest ASIHttpRequest 是一个被广泛使用的第三方网络访问开源库.用于提供更加友好的网络访问接口.相信很多搞 iOS 开发的朋友都用过它.ASIHttpRequest 的主要使用文档可以 参考这里. 另外,由于 ASIHTTPRequest 的作者已经公开说明不再维护这个开源项目,并且该项目已经一年多没有更新了,所以我一…
高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器端和node服务器端模板渲染. 它简单易用,默认采用jsp语法风格来编写逻辑部分的代码,当然,如果你想定制其他标签,也是可以很方便的配置. 它采用原生js语法,没有给使用者带来学习上的成本,当然,采用原生js能够进一步提高渲染的性能. 可以动态导入子模板,当然,子模板可以多层嵌套,同时支持为子模板传…
simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染,渲染性能达到引擎的极限. 渲染性能十分突出. 支持浏览器端和node服务器端模板渲染. 它简单易用,默认采用jsp语法风格来编写逻辑部分的代码,当然,如果你想定制其他标签,也是可以很方便的配置. 它采用原生js语法,没有给使用者带来学习上的成本,当然,采用原生js能够进一步提高渲染的性能. 可以动态导入子模板,当然,子模板可以多层嵌套,同时支持为子模板传入指定的数据集来渲染子模板,非常实用的…
最近1年多,前后端同构慢慢变成一个流行词,也许很多人还停留在前后端分离的最佳实践道路上,但实际上又有一批人已经从简单的服务端渲染走向探索最佳前后端同构方案的路上了.不过,我只是膜拜后者的过客. 虽然大家可以去网络搜索一下相关的概念解释,但这里我还是简单列举一下,我理解的术语. 1.前端渲染:浏览器一侧使用js,借助模版或vue.react.angular等框架做的DOM结构生成. 2.后端渲染:服务器一侧,使用php.nodejs等技术实现DOM结构生成,并在HTTP请求中返回给浏览器. 3.同…
前言 Spring Boot 天生的适合 web 应用开发,它可以快速的嵌入 Tomcat, Jetty 或 Netty 用于包含一个 HTTP 服务器.且开发十分简单,只需要引入 web 开发所需的包,然后编写业务代码即可. 自动配置原理? 在进行 web 开发之前让我再来回顾一下自动配置,可以参考系列文章第三篇.Spring Boot 为 Spring MVC 提供了自动配置,添加了如下的功能: 视图解析的支持. 静态资源映射,WebJars 的支持. 转换器 Converter 的支持.…
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…
首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见,我舍弃了ssr中的vuex和vue-router增加了redis,serverfetch等等实现了适合自己公司的业务,个人认为并不是所有的东西都值得吸收,对我来说我能用到的只是ssr将vue生成一个html和对应的js. 虾面我们来看看什么是服务端渲染? 官网给出的解释: Vue.js 是构建客户…
概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?百思不得其解,最后无意中看别人说viewport的默认值是980px,才知道原来是viewport的锅. 于是我深入的复习了一下viewport相关知识,把心得记录下来,供以后开发时参考,相信对其他人也有用. 基础概念 本来看了移动前端开发之viewport的深入理解,但是仍然有一些概…
参考网站:http://www.fyluo.com/?post=108 zabbix自带的模版没有CPU使用率(百分比)这个监控项,那么我们可以通过添加计数器的方式实现CPU百分比的监控. 在zabbix的WEB端进行模版配置添加cpu百分比监控项目 1.配置--模板--选择对应的模版--项目--创建项目 名称:CPU百分比 键值:perf_counter[\Processor(_Total)\% Processor Time] 数据类型:数字的(浮点) 单位:% 数据更新间隔(秒):30 应用…
1.FIFO队列   std::queue就是普通意思上的FIFO队列在STL中的模版. 1.1主要的方法有: (1)T front():访问队列的对头元素,并不删除对头元素 (2)T back():访问队列的末尾元素,并不删除末尾元素 (3)void pop():删除对头元素. (4)void push(T):元素入队 1.2代码实例 #include <iostream> #include <queue> using namespace std; int main() { st…
移动前端自适应适配方法总结 移动端前端适配方案(总结) -- 面试重点 不要再问我移动适配的问题了 一.响应式布局: // Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width…
这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就…
Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设计原理,希望能给读者带来更加清晰.更加全面的技术认知. 一.引言 在PC时代,我们用 css 设置 1px 边框,显示器会用1个物理像素进行渲染.而进入移动应用时代后,我们原来设置1px边框,在手机上可能需要用 2 个或 3 个物理像素来渲染. 那么,手机为什么要这么做?解决了什么问题?以及我们开发…
设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率交给操作系统来管理,浏览器不知道.也不需要知道设备分辨率的大小,浏览器只需要知道逻辑分辨率就可以了. 早期的移动设备,只有物理像素,没有独立像素,在不缩放的前提下,CSS 中的 1px 就代表着 1 个物理像素.比如 iphone3 的物理像素是 320 * 480,那么 width: 320px;…
每一类电子证照都具有相同板式,不同的电子证照之间只是文字.图片的差异.生成电子证照常用的方式就是采用模版批量生成. 本软件可以方便的设计证照模版.服务端根据模版生成电子证照,不同种类的电子证照生成逻辑是一样的,只是使用的模版不同.这样就大大节省了工作量,降低了电子证照制作生成的成本. 软件设计思路 Ofd文档主要包含三类元素:文字.图片.曲线.设计软件要能精确的确定每一类元素的位置.字体.颜色.大小等属性. 文字和图片是可替换元素.比如设计时,文字的值为“张三”.生成电子证照时,客户端可以告诉服…
本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了.. 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三种…
本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了. . 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三…
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…
1.移动端的屏幕适配 在Web开发中可以使用px(像素).em.pt(点).in(英寸).cm(厘米)做为长度单位,我们最常用px(像素)做为长度单位. 我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位.英寸是一个绝对的长度单位,像素是一个相对的长度单位. window.devicePixelRatio ~= 物理像素/独立像素 / 获取屏幕的物理像素尺寸 window.screen.width; window.screen.height; 2.视口viewport: // 获取vi…
# React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](http://obl1r1s1x.bkt.clouddn.com/isomorphic-javascript.png) ## 前言由于可能有些读者没听过 [Isomorphic JavaScript](http://isomorphic.net/) .因此在进到开发 React Redux Sever…
以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为了不让盒子无限放大,以至内容显示不清,界面不友好 ②设置min-width设置最小限制,以便于更好的布局 2,position:fixed;  这个属性是以window最外层容器计算 3,去除图片默认下边距的几种方法: ①在图片父容器中设置 font-size: 0; ②给图片设置 display:…
定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" /> 定义对页面的描述:<meta name="description" content="这是meta教程" /> 定义页面的最新版本:<meta name="revised" content="bu, 2016/5/10/" /> 每 5 秒…