Image Loading on Mobile CSS/HTML - javascript

I have been editing a web page, some CSS/HTML (didn't start to code from the beginning just edit)
My website works with all browsers right now, the problem is half of the images does not upload on mobile. I have put a screenshot.
Here is my code http://jsfiddle.net/2gj9b2ub/
I've been reding these media queries but it seems I have to re-write the all CSS for that? The site is not a mess just image uploading problem so maybe I can fix with something else.
Thanks for the help.

So I found a solution after few research,
I just entered this one line of code <meta name="viewport" content="width=device-width, initial-scale=0.33, maximum-scale=1" /> into head section, adjusted scale and it worked. It doesn't work as good as like bootstrap or a code for designed for mobile, but it fixed.
Thanks for help.

Related

Next.js + Tailwind Website Zoomed In in firefox

I have developed website using Next.js and Tailwind CSS. The website while testing appears to be zoomed In in Firefox but its looking fine in all other browsers.
When the screen is broguht to 80%, then the website looks fine in firefox. What's the solution to this problem so that the website should appear same in all browser.
Thanks
try to use css reset in the globalStyle.css file.
just copy the reset from the following Link .
that should resolve your problem
CSS Zoom property was used on the product site to set the layout. Avoid using this property as far as you can because firefox does not supports this property.
For anyone still looking for the solution, add the below in your head block. It did the trick for me.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"></meta>

How detect smartphone screen and show webpage

I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks
Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.

Bootstrap 2 on IE10 displays Modal wrong

i have a problem with bootstrap 2.2.1 and have a big problems with my modals in IE10.
When the modal opens it appears in the right top corner and the most of it is cutted of.
See Screenshot.
This appears only in IE10.
Do you know why and can you help me?
I can't show you the site and link, because it's on a site where you need a account to use it.
EDIT - SOLUTION:
I found the solution! The modal loaded a php file and in this php file I loaded the header of the site again (the area). And that was the mistake. After deleting the inculde line every thing worked.
IE 10 seems to behave this way when allowed to render in "quirks" or "compatibility mode"; use this meta tag to prevent it:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

White flicker between launch image (splash screen) and app homepage

I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.

Some problems on my web page on INTERNET EXPLORER and not on other browsers

Can someone help me please?
Am working on this page:
http://www.lorealprofessionnel.co.uk/about-us/loreal-professionnel-portfolio
On INTERNET EXPLORER, why I can't see arrows to navigate through the carousel. It works on all others browsers
I have put :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE[all version here]" />
but nothing !
Actually those elements appear and disappear on Chrome too. When they're invisibile it seems something has given them explicit positions which are fighting with the logic in the original CSS. I can't find where precisely quickly because the page loads over 20 JavaScript files. I have rarely seen so much code to do so little. Screams of corporate CMS. I'm not surprised debugging this is a nightmare.

Categories