I have .. strange problem with website background, elements via scrolling in mobile view (Opera browser, Chrome the same):
they are shaking! I didnt know how to describe such problem so made a video
On mobile phone normal behavie (without shaking), check several different phones.
Source code
What is it???
I don't even know the reason.
Related
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 an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I'm building a web app using the create-react-app toolkit. I'm trying to make my website as mobile friendly as possible. I'm initially designing for an iPhone 5 because that is one of the smallest phones around and because it's the phone I have. When I render my website using Chrome or Safari developer tools, the page renders very much different than when I open the page directly on my iPhone. Both Chrome and Safari developer tools have iPhone5 viewpoint defined as 320x568 however that doesn't account for the bar at the top and bottom of the page. In Safari the ACTUAL viewpoint size for my iPhone5 is 320x460 when the page first loads, and after you start scrolling down it expands to 320x529. I figured this out using:
window.addEventListener('resize', function(event){
console.log('width: ' + window.innerWidth);
console.log('height: ' + window.innerHeight);
});
HOWEVER, even when I change the size of the viewport in my developer tools to those values (both Chrome and Safari), it still looks different than the actual iPhone.
I've been unable to find similar problems/solutions to this problem on stack or anywhere else and I want to know if there's a way to make sure the page is viewed correctly on all devices?
Thank you in advance
iPhone 5 Web Design Specs
I am building a website which works fine on browsers on a laptop but when i start using the same on a mobile browser, i see that the only thing I am able to do on my mobile browser is to double tap to zoom in and be able to click and type.
I am not able to scroll or move the web page around to change the view port.
Has someone experienced the same problem before?
I am using bootstrap for this and the layout is responsive.
Please help.
Thank you
I am developing page for low end phones like s40. However, I also need to make sure it works on phone with bigger screen. My page loads fine on bigger screen but its behavior is random with opera mini in nokia s40 phones. Sometimes the page is wrapped around properly, which is what I want. But other times I have to zoom, which is absolutely not wanted. And this occurs without making any changes on my html or css file. Any suggestion?
i would suggest you to take a look on the device specific mediaqueries here and also test your mobile browser or viewports compatibility on Opera mobile emulator , you can download it from Opera dev website..