I have an iPad application that displays email newsletters. This HTML content is pulled and embedded inside a WebView. Most newsletter widths are 650px but some are around 900px.
By default, they display too small (iPad device width is 768px) so I want to make it zoom to fill the page (I am concerned with the width only - vertical scrolling is ok).
Using the viewport meta tag, if I hard-code 650px as the device width, it will cut off the 900px-wide newsletters. Also, setting an explicit width disables resizing the viewport:
<meta name="viewport" content="width=650, initial-scale=1">
However, if I set it to variable device-width, the campaign is 'squeezed' by the screen and displays off-center:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is there a way to dynamically specify the width, so that it sets it as 650 if the campaign is <= 650, and 900 otherwise? In essence, I'm trying to set a fixed viewport dynamically based on the newsletter width. Could I use the #viewport CSS rule instead?
I ended up resolving this issue using the strategy from my other similar question:
Stretch/Fit HTML Template and Children to Window
Instead of changing the viewport meta, it turned out better in my case to dynamically scale the newsletters using JS once they were loaded.
Related
I'll use the following html as an example:
<div style="width:1cm; height:1cm; background-color:blue;">
</div>
When I render this html (chrome) and change the view size to samsung s8+ the square becomes tiny. However when i insert this html anywhere on most site (ex this very site), it still isn't exactly 1cm but it's at least a lot closer and it doesn't change size when changing the view size.
Is there a HTML, css or js thing i'm missing the styling is identical.
After some more testing, the core issue was that (the width of) elements wasn't scaling past 980 px, causing items to shrink when the view width was less than 980. the solution is adding the following to the header
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is present on most websites explaining why the problem didn't occur on other sites
source: Site's body and elements are stuck on 980px width, won't scale down
I've defined the width and height of all my web page elements in pixels, which lead to huge blank spaces when displayed on larger screens. It's quite time-consuming to redefine everything to percentages. Is there a way to make my current webpages fit to any size screen automatically
This gives you a responsive web design to fit any mobile, tablet, and laptop screen.
---> W3schools gives a better explanation <--
add the meta tag in the
<head> in between these lines </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Currently, when I use CSS "vw" units (viewport width), the browser seems to always use the browser viewport, regardless of what the meta viewport is. For example, please see this jsfiddle:
https://jsfiddle.net/darrengates/ywvc6x51/
In this example, I have:
<meta name="viewport" content="width=75, initial-scale=1">
In the css, if I specify:
.vw-75 {
width: 100vw;
}
Then, I'm hoping to force any content with the "vw-75" class to be 75px, since the meta viewport is set to "width=75". Is there any way that I can force "vw" units to obey the meta value?
For those wondering "why would you ever want to do this?":
I have a website that uses VW units all over the place (for font sizes, div sizes, border sizes, etc.). Due to the requirements of the website, I want the maximum viewable area to be different based on browser, device, language, etc. In other words, the viewable content area might be anywhere from about 500px to 2000px. Rather than change all of the vw values to % values, or add a ton of new media queries (a huge task due to the site size), I'm hoping to just dynamically set the meta viewport.
Try removing , initial-scale=1 from your meta tag:
<meta name="viewport" content="width=75">
The problem may simply be that jsfiddle doesn't apply the <meta> tag.
This question already has answers here:
How is the meta viewport tag used, and what does it do?
(4 answers)
Closed 7 years ago.
In another words: What is the purpose of viewport element in HTML 5?
Because using media queries appropriate CSS styles can be applied according to screen size of device. Why we need viewport element with this part "width=device-width".
I was going through this w3 schools tutorial (http://www.w3schools.com/css/css_rwd_viewport.asp).
It gives an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag. How this works?
The tutorial says the meta viewport element sets page width as width of device. How this work restrict the page from horizontally scrollable and scalling down ?
I thought the above effect is due to media query. Why viewport element's width attribute needed for responsive design ?
What is the purpose of viewport element in HTML 5?
By default mobile devices will assume they are loading a wide, desktop style web page and scale it down to fit your small screen.
You overide this behaviour by specifying the viewport meta tag
<meta name="viewport" content="">
You specify the width your page is designed for with the content attribute. For example if it was a mobile only design you might have
<meta name="viewport" content="width=320">
Responsive web design is based on a flexible layout, and so instead of specifying a set pixel width for the viewport you instruct the browser to match the page layout to the device
<meta name="viewport" content="width=device-width">
I thought the above effect is due to media query.
Media queries are the second key part of mobile and responsive design.
The viewport meta tag is giving the browser instructions on the design width of the page, media queries let you style the page differently for different device widths. For example you might use media queries to style an <h1> element as 36px on desktop but 30px on tablet and 24px on smartphone
The tutorial says the meta viewport element sets page width as width
of device. How this work restrict the page from horizontally
scrollable ...
To clarify, setting the page width doesn't automatically stop horizontal scrolling. If you set the viewport meta to content="width=device-width" and you have an element with a fixed width of say 960px, it's not going to fit in the viewport of your smartphone and you'll have horizontal scrolling.
With responsive design it's still up to you to ensure that all the elements on the page will resize for different devices. You do this by giving them either a flexible width, or use media queries to set fixed widths for different screen sizes.
Good luck!
Using the meta viewport value width=device-width instructs the page to match the screen’s width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.
Is it really necessary to use viewport tag?
Is the viewport meta tag really necessary?
Learn More about Viewport
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en
I'm building an adaptive/responsive website.
Regarding this recent change to the HTML5BP:
"mobile/iOS css revisions"
I've started using:
<meta name="viewport" content="width=device-width">
... and I have this in my CSS:
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
When initial-scale=1 was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1 and JS fix for viewport scale bug).
To summarize, when in landscape mode, this zooms the page:
<meta name="viewport" content="width=device-width">
... and this does not:
<meta name="viewport" content="width=device-width, initial-scale=1">
Note: You can see this zooming effect in action when viewing the HTML5BP website on an iPad/iPhone.
My questions:
Is this becoming the new standard (i.e. zoom when in landscape mode)?
I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?
#robertc: Thanks! That's very helpful.
I actually like not having the initial-scale=1; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be forced to add initial-scale=1 just to please everyone (because not zooming, and seeing the layout change, is what they're used to seeing).
I just noticed the HTML5BP index.html on github, and the website, was using <meta name="viewport" content="width=device-width">; to me, that's good enough reason to ditch initial-scale=1, but I get raised eyebrows when I try to explain these things to the "non-geeks". :D
It's not a new standard, it's how it's always worked AFAIK. If you set the width to a fixed number of pixels, then rotating portrait to landscape just changes the scale, because the number of virtual pixels remains constant. I'm guessing that adding initial-scale=1 is blocking the scaling as you switch between - that is the scaling factor of your page doesn't change as the device is rotated. What does the page look like if you load it initially in landscape instead of portrait?
I would suggest that if you want the behaviour you get when you specify initial-scale=1, then specify initial-scale=1. HTML5 BoilerPlate is something you're supposed to modify to suit your own requirements.
Apple [somewhat] clearly describes the viewport behavior here.
Chiefly, device-width and device-height in iOS devices refer to the screen dimensions in portrait mode. If you set the viewport width to device-width, it is the same as setting it to a constant value. Therefore, when the physical width of the screen changes with an aspect change, the browser stretches the constant size you entered to the width of the screen in landscape mode. This behavior is neither wrong nor right, it just is.
Apple suggests width=device-width for apps tailored to the platform, so it is certainly the "Apple" way of doing it:
If you are designing a web application specifically for iOS, then the
recommended size for your webpages is the size of the visible area on
iOS. Apple recommends that you set the width to device-width so that
the scale is 1.0 in portrait orientation and the viewport is not
resized when the user changes to landscape orientation.
[ie. The viewport retains portrait device width, but is scaled or stretched for presentation to fit the landscape width]
Personally, I prefer the initial-scale=1.0 with no absolute device-width setting approach, since it makes the viewport always fill the device screen without stretching. Apple considers this valid markup as well:
Figure 3-14 shows the same webpage when the initial scale is set to
1.0 on iPhone. Safari on iOS infers the width and height to fit the webpage in the visible area. The viewport width is set to device-width
in portrait orientation and device-height in landscape orientation.
To add a little update: This is still in draft form, but it's definitely something to look into. Also has a prefixed version for IE 10 support. By using CSS instead of HTML it clears up a lot of the confusion you're speaking on by applying the initial-scale:1; to zoom:1; and giving min/max options for width, height, & zoom which furter increases the range of adjustment should it be required.
extend-to-zoom to the rescue! (http://dev.w3.org/csswg/css-device-adapt/#lsquoextend-to-zoomrsquo)
<meta name="viewport" content="initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
#-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
where as <meta name="viewport" content="width:device-width,initial-scale=1.0"> translates to…
#viewport{
zoom: 1.0;
width: device-width; /* = 100vw */
}
#-ms-viewport{
width: device-width;
zoom: 1.0;
}
Note: width:extend-to-zoom 100%; is equal to width:device-width;
http://dev.w3.org/csswg/css-device-adapt/
I found Mozilla's viewport explanation the most detailed and helpful. Here's a excerpt:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out
did you try this?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">