I've been trying numerous viewport combinations, but can't seem to find the right one.
I have a mobile site that is built to be 320 pixels wide. I'd like these 320 pixels to stretch the full width of the screen in both portrait and landscape mode, regardless of which orientation the screen starts out with, or whether the viewer rotates the device.
Thanks
What is the point of using fixed pixel values when you want the site to stretch?
Just use
width: 100%
Related
Why we have breakpoints for 400px or 600px, for example?
These breakpoints are verifying the resolution of the device, but now smartphones have resolutions such as Full HD (1920 x 1080 ) or 2k (2560 × 1440). That's why I'm confused. Why do I have to use breakpoints for smartphones with 400px - 600px if now most of them have 1080px - 1440px?
I have a 1080 x 2340 pixel device, but my webpage looks like it's 500px wide
The pixels we define in breakpoints refer to the viewport size of the device, while the pixels defined in a device's screen resolution refer to the number of physical pixels that device has. Viewport size exist to compensate the difference in screen sizes of different devices.
This unit of measurement is sometimes referred to as “device independent pixels” or “CSS pixels”.
For instance, a laptop and a smartphone, both with a screen resolution of 1920x1080. If the screen of the two devices are treated the same way because their screen resolution is the same, the same content (let's say a 1200x1200 image) displayed on both device would look fairly large on the laptop but would look very small on the smartphone because even though they have the same screen resolution, their screen sizes are very different. But with viewport size, the same content can be scaled depending on the device's screen size.
You can read more about this topic in Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development.
Hope this information answers your question.
when building famo.us apps, how are people dealing with screensizes for different devices?
i actually do NOT want to do a responsive layout - i would be happy with just scaling the content to fit the device.
Although we can use % positioning for famo.us elements, this doesn't work for fonts.
Especially as the viewport-size based font sizing isn't supported by the android browser.
Is there a way to render into a surface of a fixed size, and then have that surface simply scaled to fit the viewport? perhaps with a fixed setting like:
#jade
meta(name="viewport", content="width=500")
Any other approaches people are taking for hitting desktop, tables, mobile would be great to know.
You can calculate a surfaces size based on the viewport size, if you use window.innerWidth and window.innerHeight, so for some surfaces you want taking up 10% of the screen, you would do the following:
var surface = new Surface({
size : [ window.innerHeight * 0.1, window.innerWidth * 0.1 ],
});
This is what I'm doing, anyway. However, there is issues with this, if the screen is resized, the elements aren't, so if a user switched their android device from portrait to landscape while viewing the page, there's a problem.
I have yet to see an elegant solution to responsive-design using Famo.us.
I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
I have SVG with width set to 2048px and I want it display in Opera Mobile (with possibility to scroll horizontally if it is bigger than screen), but for some reason Opera is always displaying the SVG with width = 800px and scaling down the SVG. This happens only on a real device (Samsung Galaxy Tab 8.9 - resolution 1280x800). This happen also in horizontal mode - in which screen width is equal to 1280px so the SVG is even SMALLER than a screen. On the other hand on the Opera Mobile emulator it has the width set to 1280px (still no scroll but it's better).
I also tried to place SVG in div with some fixed sizes but without success - the size of div is correct but SVG is scaled down...
Are there any way to render a page with horizontal scrollbar? Or workaround the bug which causes the SVG in horizontal mode set to the width of shorter dimension?
You can check the example here: http://www.pax.ndl.pl/test/svg_temp.xhtml
Ok .. so here's the scenario. I've got a WP7 silverlight app, that loads an image from the net. Now, these images will be taken from mobile devices, so they may be in portrait or landscape mode. Certainly not a square.
Is there any way to maintain the aspect ratio when I show these in a silverlight <Image> control?
I'm ok with either of two resolutions:
That the image shows up in its correct aspect ratio within a predefined box that I've defined in xaml
Or that the image is cropped into the square
The way silverlight was built, you can set the width OR the height on the image, it will automatically max out whatever property you set and calculates the other side of the image so that it keeps the aspect-ratio.
So, just set a width on the image and center or right,left,top,bottom align it. (do not stretch it).