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
Related
I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone
The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.
Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.
I want it to look like an App and indeed it looks like an app on the redimensioned browser.
How do you create your responsive websites to deal with problems like this one?
I read something about using EM (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the px to em?
And also I know you can set the font-size in the html or body tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.
You can try adding the viewport <meta> tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
Using the viewport meta tag to control layout on mobile browsers
Use media queries (Link) and percentages (%), 16px (default font size) = 100%. I hope it helps.
I am having trouble with image resizing in tables in my current website project.
While basically all images in the page content are getting resized to the containers width (caused by the Twitter Bootstrap framework I am using for layout) I found out that for images in tables it does only work in Chrome. With other browser engines, resizing is ignored (only) for tables. I thought using max-width: 100% for resizing is working in all cases.
Before you ask me, for certain pages use of html tables is intended, because people without knowledge of html should also be able to easily edit the page (so I need them, sorry).
The url of the page is: http://kunden.tommy-computer.at/fsv_noetsch/?page_id=35
A stripped-down version of the problem can be seen in this fiddle.
This is what the page should look like for small browser resolutions (correct behaviour, but works in Chrome only):
This is what it looks like in other browsers (image is not resized, table columns do not have 50% width, wrong at all):
I can`t figure out how to fix this and also do not have a better approach for it. Maybe you can help me out. Thank you !
Add the table-layout: fixed; attribute to your table (tested OK with Firefox).
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.
I'm currently working on a responsive design site prototype. So far so good, but for one really strange thing which I can only seem to reproduce in Chrome. When expanding the window, sometimes the browser seems to get trapped between states, showing duplicate elements, and two scrollbars - that is, until I click somewhere outside of the browser window, then everything gets redrawn and looks just fine.
Screenshot:
I've tried a plethora of "tricks" to get chrome to "re-jig" the interface programmatically, such as changing the padding of the body element, modifying the scrollY position, and about 10 or so others, but nothing seems to do the trick. Does anyone have any experience with this? Any advice?
This looks like a bug in Chrome.
I searched Chromium bugs and found a few that are similar:
Issue 516127: Rendering artifacts on osx when something moves above the browser (dock, other windows, etc)
Issue 473933: Visual rendering issue
Issue 476909: Page didn't redraw correctly
Issue 245946: Content isn't layout correctly when resizing window
But actually none of them seems to describe your problem exactly. If you think so too, you can report your bug here.
Note that this might be as well an issue related to your old Mac OS version or even the graphics card.
Try adding this just after <head> tag
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
I had the same problem using cordova (hybrid html5/css3 mobile platform), when rotating the device the internal browser did not refresh correctly. I had a div containing everything with a fixed position. After some tries, I used style width/height: 100% and when rotating the browser refreshed correctly.
I second the suggestion to check plugins installed in case there's a conflict.
Looking on Google's forums, the issue has arisen before and was scheduled for a bugfix. Noticed while reading there that they also removed the support for browser window resizing via javascript :/
I'm guessing you have a retina display Mac and another external display connected? I see this sometimes on my setup and have tentatively narrowed it down to this situation. When using just the native screen I never see it and not in all screen configurations either.
Try and see if it happens when you use only the built in screen. If that works try switching which screen is the main screen or switch to another external screen altogether.
Sorry for the no fix, but maybe it will get you closer to a solution in your setup at least.
What special meta tags, CSS, etc. do I need to take into consideration when making my website ready to look and function right in Safari Mobile.
I didn't take much consideration to Safari Mobile until I got an iPad. I noticed that the sites I create do not always re-size correctly, look well formatted, etc. Nothing major as I am largely a front end developer.
I searched through StackOverflow and have not found a real specific outline of Safari-Mobile considerations
I am assuming that your site is already designed in a fluid manner. One of the big things for me was this:
<meta name="viewport" content="width=device-width" />
This sets the size of the viewport so when orientation changes it resizes the viewport which allows your design to reflow to the new viewport size.