I'm having issues with the rendering of a simple page on iPad in both landscape and portrait views.
I've attached a screenshot of the issue. You can see in the top right that the navigation elements are showing up to the right of the 'cut off,' but the graphical elements just stop randomly. So while it's being cut off in some ways, it's not in others.
I have what seems to be a pretty run of the mill viewport definition:
<meta name="viewport" content="width=device-width, initial-scale = 1,user-scalable=no,maximum-scale=1.0">
Any ideas why this would happen? Thanks-
I am stunned why no one answered this till now! I can see that the problem still persists so I am guessing you have not yet figured out the solution.
This is a very basic error that is faced by CSS beginners. The overflow is set to visible in your media queries, but the nested divs in the body element do not have this property. So the background components are getting restricted in the header and the footer. The links are still visible because they have a fixed width. You need to make the design more responsive so that there is no need for overflow:visible on body element and the body properly nests everything on the page. A proper responsive design will not suffer from these basic failures.
Let me know if you need further clarifications.
Related
So I had the problem on mobile described in the following question: Mobile scroll offscreen :
When an object would go offscreen, it seems to increase the total width/height of the website, so the object stays on the screen. I implemented an animation where an css objects leaves the screen and then reenters from the other side.
Following the answer to the mentioned question, I added <meta name="viewport" content="user-scalable=no"> to my HTML file.
That problem is solved, but now it will ignore the ccs code
text-size.adjust: auto;
text-size-adjust: 60%;
, so my layout is now messed up on mobile (before adding the HTML it worked perfectly fine).
Is there any way to prevent the offscreen behavior without blocking the text-size.adjust ability? Hiding the part that is offscreen would help to.
I use Google Chrome (Version 94.0.4606.85) on an Android (Version T810XXU2DRH1/T310DBT2DRH2) Tablet (Samsumb Tab S2 SM-T810)
I'm happy about every helpful answer
Looking into the viewpoint deeper on this website I found out that <meta name="viewport" content="width=device-width, initial-scale=1.0"> will set the width of the viewpoint to the device width (so no offscreen viewpoint, I assume that's possible with height too, but I didn't try) and set the zoom level to 100% when the website is loaded.
I'm facing the problem of building a responsive website.
Main part of the site is a with a fixed width of 62em. Now I want this div to shrink as a whole if the resolution gets smaller, with no scrollbars shown and no zoom used.
Currently when I open the site in a smaller resolution, scrollbars are shown but I do not have the opportunity to zoom out
Curently I'm using a flexbox design and Chrome as debug tool. What I'm really wondering about is, that sometimes the seems to work the way I want in Chrome's dev mode and sometimes it does not. I have really no idea why this behaves so randomly.
I'm interessted in a solution using only CSS.
Does anyone have a tip?
My viewport is set to
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Could a overflow issue may cause this problem?
Your best bet is probably to work with % values to max-width so it never grows bigger than your viewport size. Flexbox can have some weird behaviours sometimes. If you share some of your code I'll maybe be able to help you a little better.
Main idea
I have a web page with custom css files for different screens. After a lot of searching and using responsive simulator testers that show no errors, some iPhone users complain about broken page style.
Code basics
Page has 2 custom CSS files for larger (>960px) and smaller(<=960px) screens.
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is my page to test
Test and results
On browser testing for smaller screens (even down to 260px width) show no problems. Also validated the CSS here.
This is how it looks for some people with new updated iPhone 6 browsers (Safari and Chrome have the same result).
All the other phones (as far as I know) don't have this issue.
Relating to what others said about the 150 % width: there is some JavaScript setting that width in js_compressed.js... it's compressed so it's difficult to tell what the point of it is, but here's what it looks like pretty-printed in Chrome Devtools:
b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));
Right below it there is some stuff related to FancyBox (this, I presume)... maybe could be related to that?
Your header (and possibly footer) are set to a width of 150%?
That's what's breaking your page...
It's creating a wider section, and therefore breaking the main section of your site.
Try removing the hard width of 150%;
max-width should never be more than 100%.
Since I don't have specific code snippet to detect your problem thus It's tough to identify which part of your code creating this issue so I am not able to answer your question specifically also I haven't got this thing on my devices but I have something for you that you might need to look
Check out this SO post check out the first answer specifically it has all the hacks that you need to know for iOS safari browser.
With this I hope that my try will do the trick for you :)
Please try
#top_block_wrapper, #secondary_block{
display: block;
}
Instead of display: table-cell
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
I created a responsive design for my website. It's based on the contents of the website being inside a div which has a height of 100% of the window. The problem is that when a user clicks on an input field, the size of the browser shrinks to fit the area between the keyboard and the top url bar on a mobile phone browser. This makes my design look very odd while the keyboard is up.
Any idea how this can be fixed? I haven't seen this happen on other responsive sites, but haven't really observed closely either.
I have the following in the head of my html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Basically, I want the area which would otherwise be covered by the keyboard to be hidden when they keyboard is up, not pushed upward and squish my whole layout.
EDIT: I fixed it by doing this
$("#comment-text-area").focus(function() {
var height = $("body").css('height');
$("body").css('height', height);
});
Perhaps you could use javascript to detect when an input field is focused, then set the window's pixel size to whatever it was before the focus, then reset it back to auto when the field is unfocused?
As far as I know mobile browsers not resize the window when the keyboard is show, they only move and cover the window.
Maybe you problem is the way you are achieving the 100% height, is there any vendor specific css or a JS handing the resize events?
You could try adding user-scalable=false; to the viewport meta tag, but more than likely resize-on-field-focus is an un-override-able feature of the browser itself. It's usually a good thing to have, even at the cost of design, because people generally enjoy larger text areas to see what they're typing so I'd personally recommend against using this.
<meta name="viewport" content="width=device-width, user-scalable=false;">