I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
Related
I am working on a web application, and I am facing a lot of issues when zooming
Here is a blueprint of the architecture of the page :
lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.
I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.
Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.
The application is very old and it's working only in IE11 compatibility mode.
So my question is, how to fix the size of the page in different resolutions without modifying the emulator?
The application works fine when you use the Emulator because you define the resolution for it and the resolution won't change when zooming in this situation.
But zoom itself is a behavior which will make the browser behave as different devices and will definitely change the resolution, so the appearance will be different.
I think you just need to make media query with the commonly used resolutions. For more information, you could refer to this thread.
I have a perfectly working hosted website...on theory. I did all the responsiveness and I was testing it on a computer with mobile browser emulators. It is working with minor mistakes (which I am aware, and will fix). But here is the biggest challenge. If I run my website in emulator on the computer it does everything nicely. But from phone, it doesnt load the background-image.
So I excluded that problem would be with being responsive, problem must lay somewhere in mobile phones (both times ran by Chrome). Also doesnt work properly on other mobiles too.
Any idea or suggestion towards the mystery?
Thanks,
Koppany
I'm not a very experienced developer by any means, so these issues may have resolutions that are more obvious to you than me.
The site I'm developing is ion123.com.
I've been using my LG G4 for mobile testing. Site looks great on that particular device. Looks like butt on Safari, iPhones, and iPads. Seems like IOS isn't picking up my media queries at all, and I am using the viewport tag in the head section.
It's also not picking up styling for certain elements. For example, the left sidebar buttons on the Solutions page.
I would really appreciate some guidance here. Thanks!
It seems to be an issue with your main_style.css file. Try running through https://jigsaw.w3.org/css-validator/ and a few errors will come up that other browsers are ok with but safari fail on.
You have a number of keyframe animations that are incomplete, you should fix them or remove them (ln 234-237, 240-243, 258-261)
Ln 252 letter spacing doesn't have a valid value. Should have a 'px' after 1.2
Ln 355 random '/' character should be removed.
Once these issues were fixed the website started displaying correctly on my iOS devices and Safari (on desktop)
I have made a collaborative writing website called Fablelane (https://www.fablelane.com).
It runs with a somewhat responsive layout (except it looks bad in mobile, but that is what I am working on). Now, if I visit the site in IE 10 mobile from my Nokia Lumia 920, I can pan about 20 pixels to the right.
I am pretty sure that I don't have any weird paddings anywhere and anything that creates unnecessary spacing. I also have the view port meta tag set correctly, and I have made everything box sized.
What am I doing wrong? The issue is hard to pinpoint for me since I don't have access to other smartphones than Windows Phones, and because it's not within my budget to buy things like BrowserStack. I haven't had luck setting up the local emulator to find my ASP .NET MVC localhost site either.
Can anyone help?
Perhaps there is an overflow issue. Maybe try popping:
overflow:hidden;
into your css to see if that makes a difference or not.
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)