I have a requirement for my Webflow website to load entirely zoomed out on all devices, so I've added <meta name="viewport" content="width=1600"/> to the head of my project in an attempt to solve this. The problem is that I'm still seeing what looks like roughly 150-200px of overflow on an iPhone 6 in portrait mode (375px width). iPhone 6 landscape and iPad all work great...
The strange part is that this fits perfectly if I set the viewport width to 1400, so why does 1600+ make a difference? Surely it should just show the content at the width that I specify. Also, you'd think that if one of 1400 and 1600 were to overflow, it would be the lower width that would have the issue
I thought this was perhaps due to the elements, but I set-up a new page which only had a body element and it was still overflowing by roughly the same amount.
Here's an image of how the page loads:
Here's how it looks if I set the viewport width to 1400 rather than 1600.
Thank you to anybody who can help me here
Related
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.
I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working.
It seems my background 's arent scaling to the text - that is, these 's appear to be completely static and the text can just overflow past them and stack onto other parts of the page. What I want to happen is for the background colour, (white, grey, dark grey) to extend to the regions of the text on the mobile view.
Thank you in advance.
On every div you height and % (percentage). Take all those out and your site will be ok.
I also noticed the carousel is very slow at loading the pictures. If you compress each to about 200k or less it will load faster and still keep the resolution ok.
you have a <meta name="viewport" content="width=device-width, initial-scale=0.5">
i suggest making this to .8 or .9 or 1
the navbar menu does not adapt to mobile screens. Check the link below to see how a boostrap nav menu should be like and follow the example to create one
http://getbootstrap.com/examples/navbar/
Sections like these should have the same amount of text. So shorten the middle one out a bit, but make all sections equal to the amount of text and lines (example 3 lines or 4 lines of text) so they are responsive. A workaround will be to give a min-height to a section but i dont recomend doing that
Also the heading learning and problem solving is too long. You can change that to Learning
use the viewport meta tag, put it in your head
<meta name="viewport" content="width=device-width, initial-scale=1">
For font sizes, i prefer to use vh(viewport height) & vw(viewport width) to control sizes. That way the size will be proportional to the device view.
Be wary though. the viewport tag may cause rendering issues with height. For this, i use vh.
also, if the page is meant to fit to the screen, it may be a good idea to use "user-scalable=no" in your viewport tag. But only do that if you wish for end users to not zoom in & out.
The goal is to display a non-responsive website fully zoomed out on iPhones. In other words, the site should initially fit an iPhone screen without horizontal scrolling, then user can pinch to zoom in.
Normally, i don't need a viewport meta tag for that. When there's no viewport meta tag, the site will automatically be zoomed out to fit a mobile screen without horizontal scrolling.
But not when the site is wider than ~1000px! When it's wider, only the first ~1000px fit horizontally and horizontal scrolling appears.
Only iPhones have this behavior. On Android it's fine.
I tried to force a viewport with a corresponding meta tag and discovered that iPhone only respects the meta tag if its value is below ~1000.
E. g. if i set...
<meta name="viewport" content="width=500;">
...the site is zoomed to 500px. If i set width=900, the site is zoomed to 900px.
But when i set it to...
<meta name="viewport" content="width=1400;">
...then the site displays as if the width was 1000 or so.
Again, Android respects any width correctly.
The question is: how to i fit 1400px wide site into an iPhone screen, so that there's no horizontal scrolling when it loads initially, until user pinches in to zoom?
Here's a demo to fiddle with: http://jsbin.com/luqari/edit
Ok, i got this.
According to Safari Web Content Guide,
The default value for minimum-scale is 0.25
Thus, a larger zoom level is enforced by default. So we have to loosen the minimum scale setting:
<meta name="viewport" content="width=1400; minimum-scale=0;">
I have a webpage that draws a canvas with size width 960px and height 640px
I want to display this to fit on the iPhone4 screen . Its too big at the moment and has scroll bars.
I want to shrink it to fit on the screen
I have tried using
<meta name="viewport" content="width=320, initial-scale=0.5"/>
but it does not work.
Does anybody know how i can get it to fit on the iPhone4 screen?
Im editing my post, im sory i havent seen detailed your question, but here it is
As Azrael says also mention about Pixels and Percentages,
setting your canvas as "Pixels" will be a problem for your mobile website , because the viewport of mobile is only small , so saying 960PX for your width causes huge scrollbars cause your iphone cant show 960px, so make sure you use percentages for your page wrappers , something like this
#pageWrapper{
width:100%;
height:100%;
}
and then your page content will be using media queries.
There are more guides and talks about making your site mobile ready be sure to check this following links
http://css-tricks.com/css-media-queries/
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Hope this helps