iOS Web App not working properly - html

I'm trying to make an extremely basic web app for iOS. apple-mobile-web-app-capable does not allow my app to be run in standalone mode. I've followed Apple's own tutorial to set this up and have been surfing the web for a solution for too long at this point. I've tried clearing the cache and re-adding the app. I also tried removing the meta tag and altering it and then setting it back along with removing the bookmark, which was mentioned in another answer and it did nothing for me.
Anybody have a solution?
<DOCTYPE! html>
<html>
<head>
<title>Test App</title>
<meta name="apple-mobile-web-app-title" content="Test App">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
#testButton {
-webkit-appearance: none;
font-size: 500%;
font-weight: bold;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
function output(){
alert("window.navigator.standalone = " + window.navigator.standalone);
}
</script>
<button id="testButton" onclick="output()">Test</button>
</body>
</html>

I've encountered the same issue as you in the past. Apparently web apps don't work as expected since iOS 9 (i believe); however, I've found you can solve it with the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
<meta name="apple-mobile-app-capable" content="yes">
It worked for me, hope it does as well for you ;)

Related

How to open a local file in html?

Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src

How to fix "2.4.7 Focus Visible" Element not highlighted in mac machine

It gives me "2.4.7 Focus Visible" AA error in Mac when I check my site with siteimprove chrome extension. Some times it works fine in windows systems some times it's not.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
a#login-as-guest:focus{ background-color: yellow; }
a#login-as-guest-active:active{ background-color: yellow; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "t2hbS"
}], "*")
}
</script>
</body>
</html>
It's already running in my server "https://myappdemo.com/focus/test.html"
Please help me thanks in advance.
Your code sample just changes the focus background color and your demo link just sets the focus text color. A typical focus indicator is an outline border, which is provided by default by most (all?) browsers, but your color changes are sufficient to show a focus too. In fact, since you are only changing :focus{background-color} and a{color}, respectively in the two examples, you will get your color change and the browser's default focus border.
I don't see why siteimprove is flagging it. Can you post the error siteimprove is claiming and all relevant info it's complaining about?
Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}

HTML and CSS mobile content zoomed in?

Hello I have created a website: Omicrome.com The desktop version works find bar a few things I am still working out that are irrelevant. When I go onto the mobile version everything is zoomed in. If I dont set the viewport and put in:
<meta name="HandheldFriendly" content="true"/>
The content fits the way I want it on my Android HTC one m9. I run a "is my site mobile friendly test" and It says it isn't mobile friendly because I have not set the viewport and the content dosnt fit the screen, on my phone it does but on the image on those sites it is all zoomed in. If I do set the viewport then everything is zoomed in on my phone and on those websites. Here is a quick snippet of the head part of my page.
<html class="HTML1">
<head>
<title>Omicrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"language="javascript" type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="img/icon.ico" type="image/x-icon" />
<link rel="ICON" href="img/icon.ico" type="image/ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/MobileStyle.css">
<meta NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="The homepage for Omicrome.com, where you get the best of technology, science and making. We have on going projects and many articles for your enjoyment.">
</head>
<body>
<div class = "container_24" style="min-height: 100%;">
<header>....
Why does this happen and can I fix this. By the way I do have media queries for the css:
#media screen and (max-width:380px) {
#HTML1{
}
#rectban{
position: relative;
width: 100%;
height: 120px;
margin-right: 6px;
background: #ffffff;
}
#ULBTN{
margin-top:-13px;
}.....
I did try setting HTML1 to have a margin and padding of 0 and set their widths and heights to 100% but still it didnt work. Feel free to visit the page and tell me if it is zoomed in or not.
Try to set this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
This is the proper mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">

Firefox: no CSS errors/warnings in the log

I created a site with a bogus CSS code:
a {
foobar: 8888;
}
Then opened the page in Firefox. I looked in the web console and I can see no errors/warnings. Why?
My html head is:
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="http://localhost:35729/livereload.js"></script>
</head>
There is no warning in web console because wrong CSS rules simply has no effect in the page.

(CSS & HTML) CSS doesn't load

I'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!
mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.