Meta viewport. Back to the index. Last major update on 1. April 2. 01. 4. The meta viewport was originally invented by Apple for the i. Phone. Since web developers started to use it a lot, other mobile browsers also implemented it, including the parts that don’t make sense. Meanwhile W3. C has reverse- engineered a specification. Although I’d love to study it more and compare it to my findings, I’m afraid it’s so densely written that I do not understand it — even now that I understand the meta viewport itself. For instance, I think that W3. C’s extend- to- zoom concept is the same as my ideal viewport, but I’m not totally sure. So I hope that this page will serve as an English translation of the specification, but I’m not sure it is. My notes for this research. Not necessarily comprehensible to anyone else. This page contains my tests for the various directives in the meta viewport tag. Viewports Preferences Settings. Customize menu > Preferences > Preference.The @viewport construct is not part of this research. I’ll phase it in later when I know how it should behave. The meta viewport tag. The meta viewport tag contains instructions to the browser in the matter of viewports and zooming. In particular, it allows web developers to set the width of the layout viewport relative to which CSS declarations such as width: 2. The meta viewport has the following syntax. Sets the width of the layout viewport. Sets the initial zoom of the page AND the width of the layout viewport. Sets the minimum zoom level (i. Sets the maximum zoom level (i. Is supposed to set the height of the layout viewport. It is not supported anywhere. When set to no prevents the user from zooming. This is an abomination that MUST NOT be used. There is one special value: device- width for the width directive. Open a drawing or create simple objects as shown below. Rotate/<Viewpoint><-0.614,-0.614,0.500>: PRESS ENTER. I would do the reverse, rotate the model to align to the axes. Especially if you use a scanned image, you should try to draw the longest possible. Rotate View (parts and. Middle Mouse Button Functions * Comment: Cancel. Rotate Viewports and Reverse (Lynn Allen/Cadalyst Magazine) - Duration. Scale Views in Layout Viewports. To scale each displayed view in the plotted drawing accurately, set the scale of each view relative to paper space. It sets the layout viewport width to the ideal viewport width. In theory there’s a similar device- height value, but it doesn’t seem to work EXCEPT. The three viewports. Ages ago I reported that mobile browsers have two viewports: the visual one and the layout one. Re- read this article if necessary; I assume knowledge of these two viewports in what is to follow. The ideal viewport. See the devices page for some ideal viewport examples of the browsers on my devices. It turns out that there’s a third viewport, which I decided to call the ideal viewport. It gives the ideal size of a web page on the device. Thus, the dimensions of the ideal viewport differ per device. The View options manage view controls. Reverse keyboard action. Make Rhino rotate the scene instead of. Multileader orientation Does anyone know of a way to rotate multileaders to match a rotated viewport? You can rotate each one individually. Rotate View in Paper Space: Print. If the drawing has multiple viewports. Is there such thing as a 'reverse wipeout? So I can just hide the other stuff and rotate. On old or cheap devices with non- retina screens the ideal viewport is equal to the physical number of pixels, but that’s not a requirement. Newer devices with higher physical pixel densities may well retain the old ideal viewport, because it’s ideally suited to the device. Up to and including the 4. S, the i. Phone ideal viewport is 3. That’s because 3. Phones. There are two important things about the ideal viewport: The layout viewport can be set to ideal viewport values. The width=device- width and initial- scale=1 directives do so. Allscale directives are relative to the ideal viewport, and not to whatever width the layout viewport has. So maximum- scale=3 means the maximum zoom is 3. Finding the ideal viewport dimensions. It might occasionally be useful to be able to read out the ideal viewport dimensions. Tough luck. Well, you can do it. Give a page the following meta tag and read out document. Element. client. Width/Height. I hoped screen. width/height might be helpful here, but only Black. Berry gives the correct information. The other browsers resort to various shades of unhelpfulness. Open question: shouldscreen. Pro: the properties would at last contain useful information. Con: ideal viewport size does not necessarily equate physical pixels on the device. Compatibility - ideal viewport. Here is all of the above in easy table format. There is no right or wrong here. The values depend on the device, and all values are reasonable. Width is correct, though. Android and IE give the physical number of pixels on the screen. Layout viewport width. Before rendering the page, the browser needs to know how wide the layout viewport is. This is the viewport relative to which CSS declarations such as width: 2. Without any further instructions the browsers pick a width themselves. In six of the eight tested browsers this is 9. Black. Berry and IE1. There’s no right or wrong here; this is just the browser vendors making a choice. When you use width=4. We already knew that. However, Android Web. Kit’s and IE’s minimal viewport is 3. When you go below 3. Then there’s the case when the layout viewport becomes equal to the ideal viewport. This happens when you do width=device- width or initial- scale=1. It’s complicated, since there are bugs in Safari and IE1. Minimum and maximum dimensions. The maximum width of the layout viewport is 1. I don’t entirely trust that number, since the browsers do not allow you to zoom out to this amount. Still, for now I accept this official value. The minimum width of the layout viewport is about 1/1. This is consistent with its minimum layout viewport width. Below 3. 20px Android Web. Kit and IE take the ideal viewport size as their minimum layout viewport width. Zoom. Zoom is tricky. In theory it sounds simple: determine the zoom factors that the user can zoom in or out to. The problem is two- fold: We cannot directly read out the zoom factor. Instead, we have to read out the width of the visual viewport, which has an inverse relation to the zoom factor. The larger the zoom factor, the smaller the visual viewport width. So the minimum zoom factor determines the maximum visual viewport width, and vice versa. It turns out that all zoom factors are relative to the ideal viewport, no matter what the current size of the layout viewport is. Then there is the matter of the name. In Apple- speak, zoom is scale, and the meta viewport directives are thus called initial- scale, minimum- scale, and maximum- scale. The other browsers were forced to comply in order to retain compatibility with i. Phone- specific websites. The three directives expect a zoom factor, where for instance 2 means “zoom to 2. Formulas. Let’s define the formulas first. Thus, with a ideal viewport width of 3. The width of the layout viewport plays no part in this calculation. Minimum and maximum zoom factors. I did some extra tests on the Huawei C8. Android 4. 1. 1, because it has a landscape ideal viewport width of 5. Here, too, the minimum and maximum zoom factors were 0. So these powers of 4 are actually a general Android Web. Kit rule, and not just an artifact of the specific 6. Samsung and HTC test phones. The maximum visual viewport width here is 2. What are the minimum and maximum zoom factors the browsers support? First, a restriction. The visual viewport can never become wider than the layout viewport, so in most practical cases the minimum zoom factor is ideal viewport width / layout viewport width. Still, in these tests I can use absurd layout viewport widths such as 5,0. I did so, and the results are: Android Web. Kit’s minimum zoom factor is 0. This cannot be changed. HOWEVER, it uses 6. IE’s maximum visual viewport width is 1. Its maximum zoom factor is 6 in portrait and 6 and 2/3 in landscape. This cannot be changed. In the other browsers, without any zoom directives, the minimum zoom factor is about 0. Adding directives such as a huge layout viewport width or a huge maximum- scale causes the minimum factor to go to about 0. There are slight differences in these factors; see the table below. So in theory the i. Phone’s visual viewport width can be anything between 3. Compatibility - zoom. Here is all of the above in easy table format. Thus we can zoom out until we’ve reached the minimum factor. It also uses this value for portrait mode. IE has a maximum visual viewport width of 1. Maximum zoom factor with directivesmaximum- scale=2. Browsers stay well below the 2. Browsers stay well above the 0. It also uses this value for portrait mode. IE has a maximum visual viewport width of 1. Setting he initial- scale directive actually does two things: It sets the initial zoom factor of the page to the defined value, calculated relative to the ideal viewport. Thus it generates a visual viewport width. It sets the layout viewport width to the visual viewport width it just calculated. So let’s say we have an i. Phone in portrait mode and give it an initial- scale=2 without any further instructions. By now, it shouldn’t surprise you that this sets the visual viewport width to 1. That’s how the scaling directives work. However, it also sets the width of the layout viewport to 1. So we now have an 1. If asked for my candid opinion I’d probably mumble something like “completely fucking batshit insane.” Still, there’s no doubt that browsers behave like this. Browser bugs. Except for Android Web. Kit. Android Web. Kit allows initial- scale to set the layout viewport width only if the value is 1 AND there is no width directive. So only initial- scale=1 without any other directives works. As to IE, it applies the wrong ideal viewport (3. So the value you give to the initial- scale doesn’t matter in IE. Conflicting width directives. Since initial- scale sets the layout viewport width, you can now create conflicting directives. The browser gets conflicting orders. Let’s return to the i. Phone 4. S once more: initial- scale=1 tells it to set the layout viewport width to 3. The browser solves the problem by obeying the largest width in portrait or landscape. In our example the portrait layout viewport width becomes 4. Makes sense? Actually it doesn’t, but browsers do it anyway. In any case, what we have here is a min- width for the layout viewport. The meta tag above sets the min- width to 4. I’m not sure if there’s any practical use for a min- width for the layout viewport, but if you need one, hey, it’s there! Browser bugs. Android Web. Kit does not follow these rules. If the width equals device- width or is smaller than 3. Android Web. Kit always applies the ideal viewport width to the layout viewport. Above 3. 20 it always obeys the width directive. IE does not follow these rules above width=4. Compatibility - initial scale and width.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
September 2017
Categories |