I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.
The problem
The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.
I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.
Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.
Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden
Based and production version
If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.
Based (working): http://www.nambi.nl/lefunq/
Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php
Thanks to everyone who takes the time to look into this issue.
Your problem was caused by the facepile code:
<div
class="fb-facepile"
data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
data-size="large"
data-max-rows="1"
data-width="450"
></div>
More info:
As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.
Solutions:
I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
}
I found the way to detect if the browser is mobile in this answer:
What is the best way to detect a mobile device in jQuery?
I tried native browser, Firefox and Dolphin on Android 2.3.7.
Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.
I believe this problem is specific to the software of your device.
Related
I've been asked to make my website resize and adjust without scroll bars as it is also used on mobiles (i.e. Make it Responsive). The problem is a puzzle and is probably something straight forward but I've been Googling for an hour and haven't found an answer.
I changed the sizing in my HTML code to percentages instead of fixed sizes and replaced some styling with CSS classes. This worked and when I ran it in Chrome and IE it worked fine with the content adjusting when the browser is resized. However, when I deployed it in mobile, it just appeared the same as before with scroll bars. I went back to my code and ran it again and it worked when I ran the deployed site in the same browser but when I tried the same in a new browser it went back to scroll bars.
It works normally in IE but in Chrome and edge it only works if I compile in that browser first. My code works but obviously whatever is causing it to revert with a new browser I need to fix. Is this a browser setting or do I need to make a change in my CSS?
Try using vw as unit instead of % or px for text. And max-width and max height in % instead of px for image.
I recently tried to load a tool on my phone that I develop that is hosted internally where I work.
A few things looked off, which I expected. But one particular element seemed to be extra odd.
I eventually loaded the page in Chrome on a MacBook Pro and used the "Device Toolbar" feature to render it in my Desktop browser like it would on a phone. To keep a private application private I will demonstrate with Google.com. This is what I see:
That's the body element highlighted in blue. The html element is the same.
This is what I see in my application too and explains what I'm seeing when actually using my phone.
I can't, for the life of me, understand why these elements chose this size. There is no explicit "width" for these elements, nor is there "max-width" etc. Nothing that I can see that should cause this behavior.
Can anyone explain this behavior?
UPDATE
It appears that there is some odd behavior with Dev Tools. Proper mobile testing probably shouldn't be done this way (Feel free to change my mind, Google...) but the issue stands that sometimes, the body element doesn't stretch to accommodate its content.
By default, block-level elements, including <body>, do not expand to fit their content, but rather will expand to the width of its container. See the spec for detailed information.
See this fiddle demonstrating this. If you resize the panels/window you'll see the body width changing based on the viewport, but the content width has absolutely no effect.
This SO question has more information: Why isn't <body> expanding to fit its contents?
Another issue that's not helping is related to the Chrome dev tools device toolbar. Changing the zoom, disabling and re-enabling the device toolbar and its settings can be buggy and is not always reliable. I have spent hours chasing issues that didn't actually exist because the device toolbar functionality misled me.
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
The first time I go to this page, the positioning of the slideshow (developed using the JQuery cycle plugin) is all messed up, like this:
If I then refresh the page, it displays correctly, like this:
How can I ensure that this page displays correctly the first time it's viewed? The incorrect layout seems to happen more often with Chrome than with other browsers, though as you can see from the screenshots above it also happens with other browsers.
Thanks,
Don
Add width and height attributes to the images.
I'm guessing that the JavaScript activates before the image is loaded, it then does a couple quick computations to get the dimensions it needs, and locks them in place; all of this happens before the image is loaded and since there are no width or height attributes, the dimensions come out way off. On the reload, the image comes out of the browser cache so the dimensions are known when the JavaScript runs.
Your JavaScript runs when the DOM is ready, not when every single thing has been fully resolved and loaded. You could also try binding your slideshow to the load event rather than document.ready.
You see this in Chrome more than other browsers because Chrome is really fast and that magnifies the timing issue.