I'm trying to make web site with vieport equal 1400px. But when I increase viewport width from 1265px to 1400px it makes horizontal scroll on phone broowser. Is it possible to make viewport bigger than 1280px without hotizontal scrollbar?
You can do something like this:
<meta name="viewport" content="width=1400">
Related
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
I don't like media queries, I think it's a terrible idea.
I want to make an app for ONLY phones. So my app will look the same in all cases, but all I'm trying to do is just rescale the app for the different screens. That's it!
Now I don't like EMs, and I don't like percentage widths. All those ideas sound terrible. I like VW/VH http://caniuse.com/#feat=viewport-units but ios safari doesn't support this yet.
So my other idea is to make a pixel based static app. For example think of a calculator that is 400px by 400px in height. And everything else is sized in pixels.
Can I just take this, and set up a viewport that fits my static content but stretches it to the viewports size? I think this is possible as the viewport supports zooming, no?
Just add this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
...and then use width:100% style for all your container elements.
edit: the fact that you 'don't like' percentages. It's the solution to your problem though.
found out sort'of what I'm looking for
scale fit mobile web content using viewport meta tag
Especially the answer by Bren1818 where he programmatically calculates the initial-scale of the viewport. Although I'm not sure I like this answer either... wish vh/vw units would get on to mobile already.
I've been working on a responsive design. To stop the content from crossing boundaries i've used viewpoint meta tag with width = 480. The problem is i want my website to load with minimum of 480px no matter what. If the screen width is less than 480px I want it to fit the screen width by "Zooming out".
I've used the following viewpoint meta tag:
<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />
I've also used min-width css tag to specify minimum width.
<body style="min-width: 480px; width:100%; margin:auto;">
So after all this when i tried to load the website in DevTools Emulator (Google Chrome), it shows a horizontal scrollbar. Got any ideas on how to do it.
Have you tried width=device-width?
I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).
When I created a PhoneGap application previously, the images rendering on the pages are not correctly displayed on high DPI devices. So I made the web page with fixed pixel ratio: 1 for all devices without considering device DPI. But this will reduce the clarity of images.
I planned to use fluidic styles for my new app and not use specific width and height in HTML. But when I specified height in px for a div (in CSS), the height renders differently in different devices.
Is there any way to make the ratio of HTML as well as CSS width and height same?
Is there any unknown property to tell HTML to behave in different Pixel ratio.
I am using the HTML tag:
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
I would like to render the page in device-dpi to avoid reduction in clarity. Kindly provide your ideas.
You should ideally avoid using pixels and use em's. For ex: Instead of 16px, use 1.1em or whatever is the equivalent for your situation. This worked for my phonegap jquerymobile applications
I'm developing a web app for android using jquery_mobile.
Is there any equivalent way to 'layout_width:wrap_content'?
I want to set width for a label according to device width?
Any other options will also be welcomed.
You can solve this through a combination of viewports and CSS.
You are most likely already using a viewport similar to the one below, since you use jQuery Mobile:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
If you then set the width of your label to 100% it should have the width of the screen, assuming it is the outmost element. Otherwise it will have the width of its parent-element.
If it still has the wrong size try to define the width of each parent-element in the dom tree down to your label.