I have built a custom website, and am viewing it on my iPhone 4 that is running iOS 7. The site has a few images on it, but none of them are loading. All that shows is the image's alt tag. The site works fine on my iPhone 6s running iOS 9, and on every other device that I have tested on.
Does anyone know why are the images not loading on my iPhone 4 (running iOS 7)?
Here is a link to the website: http://testingsite1.herokuapp.com
It appears that your images are massive in size!
An image you're displaying at about 250px x 300px is actually 2687px x 3356px. That's way too large. The background image is also too large at 3000px x 2000px.
Make your images smaller if you want them to display on old devices with limited RAM.
Test how well does your browser support html5 on https://html5test.com
Keep your browser still up to date.
Test on iPhone 4 with most popular browser like Firefox, Chrome, Safari, and less.
Use Front-end Framework: Bootstrap, MDL, Semantic UI and more. Style in image will automatically works fine.
When you develop your website, you can use DevTools to view with device mode on your browser.
Related
I have a simple webpage with a <video> tag. I tried assigning the src attribute of the video tag with URLs of two different videos, both about 2 and a half seconds long:
The first video has a frame resolution of 3840x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/2/
The second video has a frame resolution of 4096x2160. JSFiddle: https://jsfiddle.net/u2sgawk7/3/
I'm encountering a problem with the second video when loading the webpage from Google Chrome on my mobile device (Galaxy S10). The first JSFiddle works perfectly fine on all devices. The second JSFiddle seems to work fine on desktop browsers, but simply displays a blank white screen when I open it on my mobile device (on Google Chrome for example).
I've tested this functionality using many other video files, and it is clear that the frame resolution is the decisive factor here: the problem occurred with every single video with a resolution of 4096x2160, and only with these videos.
I tried using this website: https://clideo.com/crop-video, to test whether or not it is even possible to display high resolution videos on mobile. I uploaded the second video (the one that was causing a white screen), and it was successfully displayed using a video tag on that website - both on desktop and on mobile!
What am I doing wrong? Any help to resolve this would be appreciated.
Once again just to clarify:
The issue does not happen on desktop browsers at all.
The issue does not happen on FireFox on my Galaxy S10.
The issue happens on every other browser I tried on my Galaxy S10, as well as in Safari on iPhone.
I have a webpage with svg background and form. The background is divided to 2 sections.
Top area - background image / bottom area - background color
Had an issue with some mobile devices, the bottom background comes up behind trees like this.
I have fixed that issue by writing media queries. After that I checked major devices responsive compatibility by chrome device emulator. All are fine. But my client complained me that he was getting that background issue on his device.(microsoft surface pro 4) Then I got back to chrome device emulator and added custom device as a surface pro 4 and set actual resolution.(2736x1824) But it's showing fine on chrome tool. (pc) This is my settings.
I'm getting this error because of not setting up device pixel ratio? or any other way to check mobile compatibility correctly?
There are lot of ad-dons available for testing responsive website on respective devices I used following add on you can try this addons
Responsive Web Design Tester - chrome
toggle Responsive - Mozilla
Just search for this addons and click on the add addons button on respective browser search for respective addons .
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 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..
I'm trying to create a mobile friendly website but I can't seem to get my base template right.
http://jsfiddle.net/dvQqb/
The template needs to be fullscreen, but not all the text needs to be small like my HTC Sensation (Cellphone) displays.
So it needs to have a width of 100% but it does not have to be seen like it is zoomed out.
A mobile browser will often assume, by default, that it's loading a page that was designed for a large screen, and therefore will make an assumption of size and then just zoom the entire document down.
To tell the mobile browser you want to target it's own screen size, you need to add the viewport meta tag information:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
A great place to start is html5 Mobile Boilerplate.
Why it is awesome
Cross-platform compatible (Android, iOS, Blackberry, Symbian)
CSS class to target IE Mobile 7
Home screen icon (Android, iOS, Symbian)
Cross browser viewport optimization for Opera Mobile, Android, iOS, IE, Nokia, Blackberry.
Optimized viewport scaling (Opera Mobile, Android, iOS, Mobile IE, Blackberry)
Option to enable iOS start-screen in full screen mode
Better font rendering on IE Mobile
Adaptable markup and CSS skeleton
CSS stylesheet for low-end devices
Mobile sitemap
Mobile MIME type support
Build tool for mobile
Fix iPhone reflow scale up bug