viewport

meta viewport相关

孤人 提交于 2020-02-24 18:38:56
meta viewport相关 <!DOCTYPE html> <!--H5标准声明,使用 HTML5 doctype,不区分大小写--> <head lang=”en”> <!--标准的 lang 属性写法--> <meta charset=’utf-8′> <!--声明文档使用的字符编码--> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用 IE 最新版本和 Chrome--> <meta name=”description” content=”不超过150个字符”/> <!--页面描述--> <meta name=”keywords” content=””/> <!-- 页面关键词--> <meta name=”author” content=”name, email@gmail.com”/> <!--网页作者--> <meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取--> <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->

第一个.NET小程序

本小妞迷上赌 提交于 2020-02-24 01:52:10
一、用户需求 做一个简单的网页版销售合同签核系统 1.业务员需要在手机或者电脑上操作,Key入销售合同 2.业务员填入相应的合同信息,对应主管签核 3.最终签核完,生成PDF版的销售合同,且上面自动加盖公司的电子印章,并打印该合同 二、开始干 由于本人不会Web,没有任何基础,现在学习已经来来不及了,只能撸起袖子就干。 之前看到有人说,撸代码就是:粘贴,复制,撸起袖子加油干。这就是我现在的策略。 觉得这个需求最大的问题是PDF上面自动加盖电子章,不知道能不能实现。 由于不会HTML、CSS、JavaScript等相关的技术,只能用很low的方法- webform。然后一边做一边学吧。 1.登录界面 因为需要在手机上面显示,本人又是啥都不会,于是百度到了这样的一句话 <meta name="viewport" content="width=device-width, initial-scale=1" /> 下面一段关于Viewport解释来自: https://www.cnblogs.com/yingcaiyi/p/6405932.html .Viewport(视窗) 什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做”视区"。 手机浏览器是把页面放在一个虚拟的”窗口"(viewport)中,通常这个虚拟的"窗口"

移动web

拈花ヽ惹草 提交于 2020-02-24 01:42:34
1、像素和物理像素 iphone5:320*568px(像素)=》640*1136px(物理像素) 2、viewport 手机浏览器默认为我们做了两件事情 1)页面渲染在一个980px(ios)的viewport:为了排版正确 2)缩放 3、Meta标签 不使用默认的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> width=device-width:布局viewport宽度=设备宽度 4、在手淘的设计师和前端开发协作过程中:手淘设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按 750px * 1334px 为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。 5、flex布局(带上-webkit-前缀适配不兼容的手机) 1)父容器:display:flex;display:-webkit-flex; 子容器:flex:1;-webkit-flex:1;(按比例划分) 2)不定宽高元素水平垂直居中   父容器:display:flex;align-items:center;(子元素垂直居中)justify-content:center;(子元素水平居中) 6、响应式布局 1)

真的了解FastClick吗?

六眼飞鱼酱① 提交于 2020-02-18 21:25:17
真的了解FastClick吗?: https://www.cnblogs.com/ylweb/p/10549040.html 你真的了解FastClick吗? 前段时间在做公司官网手机端菜单部分的时候,遇到一些很诡异的点击问题。比如菜单点击无效/双击才有效、在手指滑动的时候会触发点击事件、以及同样的事件处理在微信跟浏览器会有不一样的表现等等,这些问题我一直试图用一些移动端事件的hack来解决,到最后还是有两个问题没有解决掉。后来意识到可能是引入的插件导致的事件冲突引起,因为一直都在全局引入了fastclick,以及最初偷懒引入的一个菜单功能插件(插件中有引入iScroll)。经过排查最后得出结论是fastclick与插件 冲突所致,只能去除插件重写菜单功能。而这个小插曲也让我有兴趣阅读一下它的源码来深究一下fastclick到底做了什么? FastClick的使用场景及背景: 移动端的开发经常需要监听用户的双击行为,事件的发生顺序是这样的:touchstart---touchmove---touchend,然后大约过300ms触发click事件,用来判断是否有双击事件。 在混合使用touch与click时,会导致点击穿透!(此处不展开讨论) FastClick的思路就是 利用touch来模拟tap(触碰),如果认为是一次有效的tap,则在touchend时立即模拟一个click事件

复大官网总结

戏子无情 提交于 2020-02-18 08:27:23
一、使用到的技术 html5 css3 javascript jquery bootstrap 第三方jquery插件 @media实现响应式布局 二、根据设计稿设计内容的宽度   PC端设计稿宽度是1920px的,这是在设计的时候根据电脑的浏览器分辨率来定的。         页面主体宽度(内容宽度)设置为1200px,1200px是一个比较适合PC端显示器浏览的安全内容宽度,保证在宽度大于1200px分辨率的设备下浏览页面不会出现横向滚动条,页面有banner地方的宽度就设置为100%,设置百分比的好处是可以根据屏幕分辨率的大小自动缩放。   移动端设计稿宽度为750px,750px是iphone6的物理像素,也叫屏幕分辨率。移动端设计稿是按照设备的物理像素所给。 物理像素:     顾名思义,就是设备屏幕上的实际像素,也就是说这个手机被出厂造出来的时候,这个屏幕上有多少个像素点,它的物理像素就是多少; 设备独立像素:     也叫做逻辑像素(对于前端来说,和css像素是一样的),这个不同的设备是不一样的,在viewport为ideal-viewport模式时, 如iphone6此时的viewport为375px,代表着我们在css中写375px就可以达到全屏的效果; 三、布局编写 3.1、页面整体结构 1 <!DOCTYPE html> 2 <html> 3 <head> 4

打造自己的图表控件5

有些话、适合烂在心里 提交于 2020-02-15 14:15:24
上一次加入了鼠标拖拽功能,这回加入我来加入一个区域框,并且框内数据的阴影,效果如下 具体实现思路就是,可以响应鼠标事件来移动和调整大小,并且获取覆盖的数据,画出阴影. 响应鼠标事件可以改造上次写的鼠标移动的功能 区域框的设计为2部分,一部分是上下的区域,用来移动整个区域框,一部分为左右的线,用来改变区域框的大小. 鼠标在这两个部分上点击时才会捕获鼠标事件. 具体实现如下 class VerticalRangeNavigation extends MouseNavigation { constructor() { super() this.start = [] this.draging = false this.screen = [] this.range = [] this._area = { "topBar":"topBar", "bottomBar":"bottomBar", "left":"left", "right":"right", "none":"none" } this.barSize = 20 this.hitTarget = this._area.none this.color = "#FF00FF" } setRange(from, to){ this.range = [from , to] } hit(mouseEventArgs) { if (this

webapp 移动端的适配

拜拜、爱过 提交于 2020-02-15 00:45:11
本篇文章为转载 http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html 本文中所指 Mobile WebApp 是指运行在 Mobile WebKit 浏览器上的 WebApp 。本篇文章讲解如何像传统PC网页开发一样,使用定宽布局开发WebApp,并让WebApp适应多终端设备: 不使用Mobile UI框架 不使用响应式布局 适配多终端,适配WebApp布局宽度为终端设备分辨率宽度 一套CSS代码,一套布局方案 可以实现复杂的UI界面 支持iPhone、Android 闲扯 目前主流的 WebApp UI 开发框架有 jQuery Mobile 、 Sencha Touch 等,这些框架在处理不同设备分辨率的适配时,采用响应式布局和基于百分比的形式显示 UI 组件, UI 可以根据设备的不同尺寸进行呈现 。 虽然 jQuery Mobile 等框架很强大,但是在开发 UI 复杂的界面时,还是力不从心:百分比设置宽度不能适应复杂的布局要求。这时就需要固定宽度布局的开发方式了,但是网上的资料都在讲述“定宽网页设计,并不适用于多终端兼容的情况”, jQuery Mobile 等框架也没有提供良好的解决方案

css3 响应式布局 Media Query

亡梦爱人 提交于 2020-02-14 05:55:05
1.什么是响应式布局?   响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端。 2.响应式布局的优缺点?   优点:面对不同分辨率设备灵活性强,快捷解决多设备显示适应问题   缺点:工作量大;会出现隐藏多个无用元素加载时间延长;一定程度上改变了网站原有的布局结构 在页面的<head>标签中加入这句: <meta name="viewport" content="width=device-width; initial-scale=1.0"> meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。 参数设置: width(viewport的宽度) height(viewport的高度) initial-scale(初始的缩放比例) maximum-scale(允许用户缩放的最大比例) minmum-scale(允许用户缩放的最小比例) user-scalable(用户是否可以手动缩放) 3.用法   <link rel="stylesheet" type="text/css" media=" only screen and (max-width:480px) , only screen and (max-device-width: 480px) " href="small.css"/>  

移动端适配之路的一步步了解

China☆狼群 提交于 2020-02-13 21:33:08
》开始入手第一部分知识点 关于viewport(视口)的了解 视口就是浏览器中用于显示网页的区域,PC端,视口的宽度等于浏览器窗口的宽度。而在移动端,视口又分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。 那什么是布局视口( layout viewport)? 视口与浏览器屏幕不相关联,CSS布局会根据他来计算,并被他约束,为了容纳为桌面浏览器设计的网站,移动设备默认的布局视口宽度远大于屏幕的宽度,其大小与设备有关。 通过document.documentElement.clientWidth/Height可得到布局视口的尺寸 什么是视觉视口( visual viewport) ? 用户看到的网站区域,即用户看到网页区域内CSS像素的数量(注意, 是网站区域,不要和屏幕区域混淆了) 屏幕通过手势放大时,用户可看到的网站区域相对减小,此时视觉视口也在减小 通过window.innerWidth/Height可得到视觉视口的尺寸 什么是理想视口( ideal viewport)? 为浏览器定义的可完美适配移动端的视口,可认为是设备视口宽度 只有当为页面添加meta视口标签时,理想视口才会生效,如下: //这一行代码告诉浏览器,布局视口的宽度应该与理想视口的宽度一致 <meta name="device

Extjs4快速上手三——实现主界面

拥有回忆 提交于 2020-02-09 18:28:19
  晕啊,今天不顺啊,白天毕设因为一个小问题耽误了很长时间,刚写了一半了突然浏览器又卡死,打开后又待重新写。。。。。。 1 创建项目   这个不多说,新建个Web project都会吧。 2 导入Extjs文件   在WebRoot下新建ext文件夹,将下载的ext包中如下文件拷入: 3 创建所需文件夹及文件   按照如下结构创建文件夹及文件:   绿色框住的为本次必须文件。 4 编写代码   首先编写index.jsp,这是Extjs的入口页面(其实准确地说Extjs在运行过程中只存在这一个页面,其他的都是其用js生成的组件而已,其本质是div+css),在其内部引入Extjs库文件和样式文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>ExtTest</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text