viewport | 易学教程

GoJS的学习使用

阅读更多关于 GoJS的学习使用

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Process Flow</title> <meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />  <meta charset="UTF-8"> <script src="js/go-debug1.js"></script> <script id="code"> function init() { if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go

移动端布局方案，简单高效，完美适配各种机型

阅读更多关于移动端布局方案，简单高效，完美适配各种机型

第一步：使用淘宝的lib/flexible+rem布局原理：　　 rem布局：使用rem作为元素大小的单位，rem=fount-size，根据不同的屏幕宽度设置不同的fount-size值，这样元素也会跟着屏幕变大或变小　　 lib/flexible：　　　　通过js查询屏幕大小，设置viewport标签的同时始终将fount-size设置为屏幕宽度的1/10。　　　　我们也应该将设计稿分成1/10与之对相应，　　　　由此得到1rem=屏幕宽度的1/10=设计稿的1/10 　　　　如果设计稿大小为750px，则1rem=75px，　　　　比如在设计稿上量到一个宽度为150的元素，可以通过150/75得到此元素在设备中的宽度为2rem 用法：　　去掉html中的viewport标签，vue项目在public/index.html中操作　　　 vue项目中在main.js中引入flexible 　　　import ' lib/flexible/flexible.js ' 引入后就实现了动态设置fount-size和viewport标签了，接下来我们只要在项目中以rem为单位写样式就可以了，但是每次都要手动计算rem太麻烦，可以使用插件postcss-px2rem-exclude 第二步：使用postcss-px2rem-exclude将px转换为rem 　　　

自适应网页设计（Responsive Web Design）

阅读更多关于自适应网页设计（Responsive Web Design）

自适应网页设计（Responsive Web Design）　　随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？　　手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。　　很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？一、"自适应网页设计"的概念　　2010年，Ethan Marcotte提出了 "自适应网页设计" （Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

ipad自适应方案

阅读更多关于 ipad自适应方案

var view_timer = null function viewPort ( userAgent , pageWidth ) { var oView = document . getElementById ( 'viewport' ) if ( oView ) { document . head . removeChild ( oView ) } if (! pageWidth ) { pageWidth = 750 //手机页面设计图的宽度，宽度多少设置多少 } var screen_w = parseInt ( window . screen . width ), scale = screen_w / pageWidth if ( /Android (\d+\.\d+)/ . test ( userAgent )) { var creat_meta = document . createElement ( 'meta' ) creat_meta . name = 'viewport' creat_meta . id = 'viewport' var version = parseFloat ( RegExp . $1 ) if ( version > 2.3 ) { creat_meta . content = 'width=' + pageWidth + ',

PDF转图片，在线PDF转JPG/PNG

阅读更多关于 PDF转图片，在线PDF转JPG/PNG

使用pdf.js预览图片，pdf.js将pdf通过canvas将每一页渲染出来，然后我们通过canvas的toDataURL方法保存为jpg或png格式。 pdf.js是Mozilla开源的一个js库，无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。需要 pdf.min.js 和 pdf.worker.min.js 两个js文件 pdfjsLib . GlobalWorkerOptions . workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js' ; const preview = document . getElementById ( 'preview' ); const page_num = document . getElementById ( 'page_num' ); const out_type = document . getElementById ( 'out_type' ); let pdfFile , pdf , pageNum , context = preview . getContext ( '2d' ); out_type . querySelectorAll ( '.button' ). forEach ( function

移动端处理多倍屏的问题

阅读更多关于移动端处理多倍屏的问题

一、认识物理像素、设备独立像素、设备像素比　　在css中我们一般使用px做单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同设备或不同环境中，CSS的1px所代表的物理像素是不同的。在pc端，CSS的1px一般对应着电脑屏幕的1个物理像素，但是在移动端，css的1px等于几个物理像素和屏幕像素密度有关。物理像素(physical pixel) 　　物理像素又被称为设别像素，设备物理像素，它是显示器（电脑、手机）最小的显示单位，每个物理像素由颜色值和亮度组成。所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个css像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个css像素点，在普通屏幕下的1个css像素对应一个物理像素，而在Retina屏幕下，1css像素对应的却是4个物理像素设备独立像素(device-independent pixel) 　　设备独立像素又被称为css像素，是我们写css时所用的像素，他是一个抽象单位，主要使用在浏览器上，用来精确度量Web页面上的内容。设备像素比（device pixel ratio）　　设备像素比简称dpr，定义了物理像素和设备独立像素的对应关系，：设备像素比=物理像素、设备独立像素。　　css的1px等于几个物理像素

加和不加meta的viewport有什么区别

阅读更多关于加和不加meta的viewport有什么区别

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/85988193 这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是：【加和不加meta的viewport有什么区别】 1.背景介绍 2.知识剖析 3.常见问题怎么利用meta标签对viewport进行控制？ 4.解决方案 5.编码实战 6.扩展思考：meta viewport 的属性和值 width :设置layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale :允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale :允许用户的最大缩放值，为一个数字，可以带小数 height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 user-scalable: 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 7.参考文献 baidu 8.更多讨论

pdf.js插件使用记录，在线打开pdf

阅读更多关于 pdf.js插件使用记录，在线打开pdf

天记录一个js库：pdf.js。主要是实现在线打开pdf功能。因为项目需求需要能在线查看pdf文档，所以就研究了一下这个控件。有些人很好奇，在线打开pdf文档浏览器不是支持吗。是的你说的都是现代浏览器，例如谷歌，360，edg等。但是很不幸的是我们这个项目是要使用我们最喜欢（很烦）的浏览器IE。所有要想使IE能够在线读取pdf，我就知道两种办法第一种下载Acrobat Reader插件，第二就是使用js库了。介绍pdf.js pdf.js是一个开源的js库。官网： http://mozilla.github.io/pdf.js/ 源码地址： https://github.com/mozilla/pdf.js 下载并解压我们在 http://mozilla.github.io/pdf.js/getting_started/#download 选中版本后下载后解压会生成两个文件夹：这两个文件夹核心文件就是build文件下的js文件，web文件是官方给写好的封装示例，你你可选择使用或者不使用。 ├―― LICENSE ├―― build/ │ ├―― pdf.js - 显示层 │ └―― pdf.worker.js - 核心层 └―― web/ ├―― cmaps/ - 字符映射（由核心要求） ├―― compressed.tracemonkey-pldi-09.pdf -

Scale down Mobile Safari viewport width when iPad is in portrait orientation?-

阅读更多关于 Scale down Mobile Safari viewport width when iPad is in portrait orientation?-

I am working on a website which is designed to work best when viewed in landscape mode on iPad. Everything is in a 1024px wide <div> container. However, I am still required to scale down the viewport so when the user turns the iPad into portrait orientation, the user does not have to zoom out or scroll horizontally to see everything on the page. Currently I have this <meta> tag in my <head> : <meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" /> Everything displays fine when the page is viewed in landscape mode, but I can't get the abovementioned required

Hello，移动WEB―Viewport_Meta标签

阅读更多关于 Hello，移动WEB―Viewport_Meta标签

meta标签：语法： <meta name= "viewport" content= "name=value, name=value" > 参数: 1. width: 设置布局viewport的特定值(" device-width" ) 2. initial-scale: 设置页面的初始缩放 3. minimum-scale: 最少缩放 4. maximum-scale: 最大缩放 5. user-scalable: 用户能否缩放 ( "yes" | "no") 常用写法： <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> 注意：如果不加 user-scalable=no，只设置了initial-scale=1，在chrome浏览器的默认字号为"中"时，是达不到缩放比例为1的效果，即initial-scale=1不起作用，加上user-scalable=no后，默认字号为"中" 不会起作用，chrome浏览器会默认字号"小",达到缩放效果，所以一般建议都写上. 文章来源: Hello，移动WEB―Viewport_Meta标签

订阅 viewport