viewport

常用meta整理

由 余生长醉 提交于 2019-12-20 18:21:04
概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息 可选属性 属性 值 描述 http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部。 name author / description / keywords / generator / revised / others 把 content 属性关联到一个名称。 content some text 定义用于翻译 content 属性值的格式。 SEO优化 参考文档 页面关键词 ，每个网页应具有描述该网页内容的一组唯一的关键字。 使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。 <meta name="keywords" content="your tags" /> 页面描述 ，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。 <meta name

Full viewport height scaling div just css no js… Possible?

由 拟墨画扇 提交于 2019-12-20 09:57:09
问题 Ok, I'm trying to get a div to scale and the height is always the height of the viewport. I'm going to link to my examples as it needs some explaining. www.madmediablitz.com/tv/precentdemo.html The link above is the closest I've come to a solution and I'm hoping that someone here will find it simple to fix. What I want to happen is the tv to always be the height of the viewport (to a degree, min-height:~400px; max-height:~700px;). The code that I used there is based on http://www.alistapart

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

由 一曲冷凌霜 提交于 2019-12-20 09:38:05
问题 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

Get child element to respect parent element Width & Height

由 ℡╲_俬逩灬. 提交于 2019-12-20 05:39:29
问题 I was working on a wepage earlier this week where the 'banner-image' was being cut off the view-port of the screen depending on the browser and size of screen. I thought that by simply converting the Parent Container to 'Height: 100vh' this would make all child elements fit within the parent container that is now set to fit the height of any viewport. This did not work as I intended it to. The banner image was still being cutoff even though the parent container was set to 100vh. Is there a

How does zooming, panning and rotating work?

由 …衆ロ難τιáo~ 提交于 2019-12-19 17:44:20
问题 Using OpenGL I'm attempting to draw a primitive map of my campus. Can anyone explain to me how panning, zooming and rotating is usually implemented? For example, with panning and zooming, is that simply me adjusting my viewport? So I plot and draw all my lines that compose my map, and then as the user clicks and drags it adjusts my viewport? For panning, does it shift the x/y values of my viewport and for zooming does it increase/decrease my viewport by some amount? What about for rotation?

理解SVG的viewport，viewBox，preserveAspectRatio【2】

由 你。 提交于 2019-12-19 17:10:21
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一个svg，设置了viewBox之后，viewBox的长宽值如果都小于svg的viewport的长宽值，那么结果一定是放大；但是 viewBox的长宽值一旦有一个值大于vewport之后，最后的实际效果就不是放大，而是缩小了。 因为 viewBox的目的是要自己设置的长宽范围填满viewport。viewport的长宽是确定的，viewBox设置的值如果超出了viewport，然后又企图去填满 viewport，必然是缩小自己。这里的“填满”换成“适应”应该更合适。 viewBox总是试图让自己从初始设置的尺寸变成和 viewport具有一样的尺寸。 然而这种放大或缩小其实是有策略的，这个策略由svg的preserveAspectRatio属性来确定。preserveAspectRatio的值成组出现的，第一个参数值表示位置，第二个就是表示缩放策略了。如果第二个值是meet就是缩放比例按照短边的来进行： <svg width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;"> <rect x="10" y="10" width="150"

WebView in Android 4.4 and initial-scale

由 本秂侑毒 提交于 2019-12-19 09:51:58
问题 I've been banging my head against the wall for the whole day now, and i need some help :( The problem is, that i have a WebApp that was designed for 640x960 . We didn't have time to write css for each screen size, so i've used initial-scale, maximum-scale, minimum-scale in the viewport meta tag to scale the app to different screen sizes. The problem is, that in Android 4.4 , no matter what i do, it always scales the app up, but never down! I mean if i use a value of 0.7 , the app is scaled up

How do you change zoom level dynamically with Javascript?

由 不想你离开。 提交于 2019-12-19 09:50:14
问题 I'm trying to figure out how to reset the zoom level in a webpage for ios. It seems that when the user does a pinch zoom in/out the zoom feature no longer works. I want pinch gestures, but want to programatically reset the zoom. Anyone have ideas on changing zoom dynamically with Javascript/jQuery? <meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" /> $(document).ready(function () { $("#zoomOut").click(function(){ $('meta

IT兄弟连 HTML5教程 在移动设备上设置原始大小显示

由 北城以北 提交于 2019-12-19 09:04:04
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在iPhone系列和iPod Touch中使用的是Safari浏览器，它支持前面介绍的媒体查询表达式。例如，使用iPhone 320px×480px的分辨率去访问我们前面的布局示例，却无法得到我们想看到的结果，并不是从上到下排列显示，而是和计算机显示器访问的布局相同。为什么会这样？因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的，因为很多网页是按照800px左右标准制作的，所以Safari浏览器默认按照980px的宽度进行显示，就可以正常显示绝大多数的网页。所以即使已经写好了页面在小尺寸窗口中运行的样式，iPhone中的Safari浏览器也不会使用这个样式，而是选择窗口宽度为980px时所使用的样式。所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。解决方法是在页面的头部<head></head>之间加上如下所示的语句： <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 或： <meta name="viewport" content="width=600px " /> <meta>标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明

window.innerWidth in Chrome's device mode

由 白昼怎懂夜的黑 提交于 2019-12-19 05:24:18
问题 When in google chrome's device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)? I'm getting different values for the device's width x height (the dimensions on top of the page - the device's viewport?) and window.innerWidth x window.innerHeight (browser's viewport?). Is this supposed to happen? Here's a picture of what I'm getting, and the code I used. <!doctype html> <html> <head></head> <body> <script> var image; window.onload = function() {
订阅 viewport