I have a ReactJS website recently deployed on Heroku, and believe I have what's needed for a website to be mobile responsive, yet the website just looks exactly how it should look like if it were to be viewed on a desktop. Everything is extremely small when viewed on mobile.
What could be the issue?
Here is the HTML:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>
Maybe the content extends past the container, like images or something. Try this to see if that's the case:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
Related
I want my borders to be on top for mobile like devices and on the left for others.
It's working on mobile but for others it's adding the properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>
</html>
Since you are adding rounded-t-lg without a prefix, it takes effect on all screen sizes.
To hide the top border on screens at the sm breakpoint you will have to add sm:rounded-t-none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>
</html>
i create one site in angular 7.i implement adminLTE theme but issue is login and register page have use different css and dashboard use different css.
so how can i put different css for both so there is no conflict.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Angular AdminLTE</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body hold-transition>
<app-root>Loading ...</app-root>
</body>
</html>
and also body have different class for login,register and dashboard so how can i also use related class to its component
Please anyone can help me to out this.
I have one irritating issue.
During loading, IE8 shows Bootstrap's mobile menu (stretched 100%-fullwidth) for a part of second, and after that "normal" menu is shown.
Very very irritating issue.
Header looks like this:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Title</TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-8859-1">
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="">
<META NAME="author" CONTENT="GlobalCAD">
<meta name="robots" content="noodp,noydir">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="../css/ie8-and-down.css" />
<![endif]-->
I really dont have a clue what could be the reason, anybody have any suggestions?
I am a C++ developer who recently started using HTML5 in my mobile apps, I don't have too much knowledge in the world of web programming and I would very much like some advice in order to fine tune my meta tags.
I need the perfect meta tags that would suit a mobile application for ios/android/windows phone/blackberry etc.
The problem is I am not sure what exactly I need and what I don't need, this is the list I have so far:
html, body
{
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-overflow-scrolling: none;
-webkit-backface-visibility: hidden;
-webkit-transition: translate3d(0,0,0);
transition: translate3d(0,0,0);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-text-stroke: 1px
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
margin: 0;
padding: 0;
border: 0;
background-color:#202020;
}
* {margin:0; padding:0; border:0;}
<!DOCTYPE html>
<html>
<head>
<title>$Title</title>
<meta charset="UTF-8">
<meta name="keywords" content="Test">
<meta name="description" content="Test">
<meta name="subject" content="Test">
<meta name="copyright" content="Test">
<meta name="url" content="http://www.test.com">
<meta name="language" content="en-GB">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta name="pagename" content="$Title">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="target" content="all">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="640">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-title" content="$Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="ResourceLoaderDynamicStyles" content="">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
<script>
document.ontouchmove = function(e)
{
e.preventDefault();
}
</script>
Any advice?
You need:
<meta charset="UTF-8">
<title></title>
<meta name="description" content="Test">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- user-scalable=no" this will block zooming in your app and I would suggest to not use (bad UX)
<meta name="apple-mobile-web-app-title" content="$Title">
- Launcher Title if you dont want to use title tag for this.
<meta name="apple-mobile-web-app-capable" content="yes">
- this will hide browser interface
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- and this will change color of status bar in ios
You should add:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
-iOs launcher icons
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#222222">
- Windows icons
<link rel="apple-touch-startup-image" href="/startup-image.png">
-iOs startup-image
<meta name="mobile-web-app-capable" content="yes">
- Android/Chrome homescreen
You dont need:
<meta name="keywords" content="Test">
- no need for this, google and other search engines does not use keywords meta
<meta name="subject" content="Test">
- the subject of page. Not recommended
<meta name="copyright" content="Test">
- more for you then for anybody else
<meta name="url" content="http://www.test.com">
-this is your full domain name or web address. for SEO
<meta name="language" content="en-GB">
- W3C is recommending to use <html lang="en"> not the meta tag
<meta name="pagename" content="$Title">
- It is additional page title. No such tag in html5 spec?
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
-defines the level or degree of distribution for crawlers but there are not recognized metadata then you shouldn't use them. invalid for HTML5
<meta name="target" content="all">
- ??? not sure what it is:P some crazy windows thing old old one? No such tag in html5 spec?
<meta name="HandheldFriendly" content="True">
- future for old windows phones to say that page is viewable on small screen
<meta name="MobileOptimized" content="640">
- statement on what size of screen page was optimized for Windows but it is for old phone and it not really working. I would suggest use media queries for that.
<meta name="format-detection" content="telephone=no">
- phone number detection for Safari on iOS (bad Ux if you disable this)
<meta http-equiv="cleartype" content="on">
- Mobile IE smoothing fonts feature but this is not standard W3C tag. I would suggest do font smoothing in CSS.
<meta name="apple-touch-fullscreen" content="yes">
- this was used in early demos. you need only <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="ResourceLoaderDynamicStyles" content="">
- this should make browser to mark DOM before CSS is added. I dont think you should do that.
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- cache things. Now days that kind of stuff is done server side.
<meta http-equiv="imagetoolbar" content="no">
- IE6 feature. Obviously no need
<meta http-equiv="x-dns-prefetch-control" content="off">
- DNS prefetching.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- IE8/9 Compatible mode.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- duplicated entry <meta charset="UTF-8">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Set a shorter title for iOS6 devices when saved to home screen -->
<meta name="apple-mobile-web-app-title" content="Ratchet">
- duplicated entries
Im trying to set utf8 in html5 running in windows over Xampp.
When I run the code without any stylesheets, it works great:
<!DOCTYPE html>
<html lang="es-ES">
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>Test</title>
</head>
<body>
My Output Compañia 2014
</body>
</html>
And my output:
My Outpul Compañia 2014
But when I add in a stylesheet to the head:
<!DOCTYPE html>
<html lang="es-ES">
<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">
<meta name="description" content="">
<meta name="author" content="">
<title>Test</title>
<link rel="stylesheet" href="/test/css/style.css" type="text/css" />
</head>
<body>
My Output Compañia 2014
</body>
</html>
Utf8 charset fails in output:
My Output CompaÒia 2014
Any Ideas to solve this? I tried with AddDefaultCharset UTF-8 in .htaccess, declaring utf-8 in the css but nothing works.
See if the font you are setting on body in your styesheets has compatible utf 8 character set and this specific character's code is mapped to the same character in your font.