I am wondering what am i missing here
this is the html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../../nImg/favicon.ico" type="image/x-icon" />
<title>Gran Melia</title>
<meta name="Description" content="Gran Meliá"/>
<meta name="Keywords" content="Gran Melia"/>
<meta name="Language" content="es"/>
<meta name="Robots" content="index,follow"/>
<meta name="og:description" content="red" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<!--<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
<!--<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> -->
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<!--<link href="css/media.css" rel="stylesheet" type="text/css" />-->
<!-- <link href="http://keepyourlinks.com/css/ui.css" rel="stylesheet" type="text/css" /> -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<!-- Fondo de galerÃa -->
<script src="js/graphics.js" type="text/javascript"></script>
<script src='js/iscroll.js' type='text/javascript'></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
/*Fotos de fondo*/
var photos = [
"http://www.bancotravel.com/images/hoteles/M/MELIAPALACIOISORAALCALA/foto-hotel-23.jpg",
"http://www.bancotravel.com/images/hoteles/M/MELIAPALACIOISORAALCALA/foto-hotel-24.jpg",
"http://larivieramaya.es/wp-content/uploads/2011/04/sol-melia-prepara-el-lanzamiento-en-mexico-de-la-marca-paradisus-con-dos-hoteles-en-playa-del-carmen.jpg"
];
</script>
</head>
for what i can guess, i am commenting the lines (device-width) that should prevent this to happen so I am kind of lost...
In case this code is not enough, the testing website is http://toniweb.us/gm
-EDIT-
Won't let user scale or scroll even if:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=1, minimum-scale=0.5, maximum-scale=2.0">
I opt for this as the problem. If you have 100% height of body and html iphone is irritated.
html, body {
height: 100%;
}
<meta name="viewport" content="width=device-width">
That's the problem
<meta name="viewport" content="width=1024">
Should solve it
-edit-
Whoops, that site isn't 1024 pixels. Try experimenting with the value - maybe 320 (iPhone width)
-edit2-
Why would you want to let iPhone users scale the website anyway? If you design it for the right size, it's only annoying if they can scale...
Related
In local dev, everything is great because my Tailwind CSS is taking priority on styling my icons:
However, once I've deployed my app (Vite on Vercel), for some reason the Material Icons style takes priority:
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Come on now!</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:400,700', 'Material+Icons']
}
});
</script>
</body>
</html>
I think I could probably apply !important to my Tailwind config but that's clearly not the right answer.
I have the following code:
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>EPDM Polymers | EPDM Rubber Granules | Poured-In-Place Rubber</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="./css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<link rel="stylesheet" href="./js/BackToTop.jquery.css" type="text/css" />
</head>
However, The favicon is not showing up on www.epdmpolymers.com I have the favicon.ico file in my images folder. Any ideas?
You have 2 links for favicon.ico, try removing the first link from your code. I guess it would work for you.
Or once again cross-check the path of the image, try using relative path to the file.
For example: If your image is in root/images folder, so use (/images/favicon.ico)
One of my favorite debugging methods is to download and use a favicon.ico file from a working site like http://www.google.com/favicon.ico
If it works then the issue will be because of your file size or
format.
If it does not work then the issue will be either with the
html tag.
To rule out file permission issue try accessing your favicon file
directly using its url through the browser address bar.
How to add a notification under an input when focused ?
Like this:
(source: cjoint.com)
Is there any bootstrap plugins for this ?
Thanks,
Vincent.
There is a bootstrap plugin for it. have a look at it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notification in text nox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<input type ="text" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Have a good day!!
This is the code in my index.html file in Eclipse. The javascript part is not working.
When I click the "Click" button, send() function is not implemented. alert box does not appear.
Even if I do <button onClick="alert('heloo')">Click</button>, no alert appears.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<p>hello</p>
<button onClick="send()">Click</button>
<script type="text/javascript">
function send(){
alert("Heloo");
}
</script>
</body>
</html>
Working good with iPad but not iPhone
Any code can I direction to iPad and iPhone
for iPad
<meta name="viewport" content="width=1040px, minimum-scale=0.5, maximum-scale=1.0" />
for iPhone
<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />
iPhone max-width is 480px not 440px
<meta name = "viewport" content = "user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
This sets the viewpoint with the scaleable option off
<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>
This is a css file for only iPad
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>
This is a css file for only iPhone
They are conditional comments so they will only apply to specific devices with specified max-widths.