My html site is not displaying in mobile devices - javascript

I am using the following CSS link code on my site:
<link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" >
and also the following code
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta http-equiv="cleartype" content="on">
Here is my site links - http://www.etutorbd.com/shopi/. It's displaying properly in desktop browser but It's not displaying in mobile browser. I have checked in my android phone. I have found this answered My phone is not displaying the mobile oriented version of my site but It's not working for me. I didn't found any console error. I had a problems like "Error: Failed to execute 'send' on 'XMLHttpRequest' ". But I have fixed that. What am I doing wrong here? Is there any jQuery or CSS media type issues.

You have to remove this from your HTML body:
overflow: hidden; height: 100%; font-size: 81.44%;
if you really need it, add it to your CSS and then use media-queries to disable it on mobile sizes
EDIT with code:
body{overflow:hidden /*use it only if needed, otherwise remove it */}
#media(max-width:768px){
body{overflow: auto; height: 100%; font-size: 81.44% /* change if needed */;}
}

Related

Why aren't my CSS3 media queries working?

Need your help. Can't solve this down, been looking for the answer for so long and didn't find anything on it.
It's about a simple media query written abslutely correct.
#media (max-width: 942px) {
.top-header {
flex-direction: column;
}
}
Besides, I don't see the "flex-direction: column" style applied to the ".top-header" in Web Inspector somehow.
Using preprocessor LESS and koala compiler, just so you know. Don't get any errors from the compiler, the generated CSS file is ok: that media query code is there, right at the end of the file as it has to be.
Media viewport is used:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is an HTML snippet, where the ".top-header" can be found:
<header>
<div class="container">
<div class="top-header">
<div class="top-header__logo">
<img src="img/Welcome-page/header/Logo.png" alt="Logo">
</div>
...
</header>
There you can see that name class ".top-header", so what couid it be...
So really can't figure it out, hoping to get some straight answers.
Try to use this instead:
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
Also, your media query has a missing }

Drop Down Menu Click

Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc

How can I make my web fit perfectly in any smart phone?

Please take a look at the link with your smart phone, you can see that it's a bit off. I center everything and the web looks fine in Desktop but not in smart phone(I use iPhone 5S). Is there any ways I can make it like the desktop for any kind of smart phone? Is there any ways I can make it look like Gmail app that you can not scroll everywhere?
I have done all the adjustment like the following code in the head tag. But it's not working. Here's the url if you need to look up in Desktop: https://johnny00520.github.io/Test.git.io/
Thank you so much.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>MindScribe</title>
<!--<meta name="description" content="An interactive getting started guide for Brackets.">-->
<!-- Maybe I need. Note that Android and iOS ignore media="handheld"-->
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">
<!--smartphone conpatible-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<!-- Home screen icon -->
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">
Try the following:
Add to body the following CSS properties:
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
box-sizng - The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
overflow - to prevent the scrolling.
padding & margin resets just to clean up any extra space generated by the browser.
This will push your #cursive title up a bit, but you can bring it down with let's say (tweak to your benefit):
margin: 4em 0 1em;
You may chose to add the above inside a #media query for mobile viewport only or not, could be something like (tweak value to your benefit):
#media (max-width: 768px) {
body {
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
/* etc */
}
}

textarea changes font-size according to the screen size

I don't know what happens in a desktop browser but in Android default browser when i keep the width and height as 100%
The font size of the textarea increases according to the screen I tried to alert the font - size of the textarea but it doesn't change .I think this is a bug in the browser if not is there a way to fix this issue ?
Any help would be appreciated.
The code is simple it is:
<textarea></textarea>
<style>
textarea{
width:100%;
height:100%;
font-size:16px;
}
</style>
<script>
alert($("textarea").css("font-size"));//uses jquery
//Outputs 16
</script>
I have noticed that the font size starts changing after the width becomes more than ~450px
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Disable zoom.
i think the problem related to :
<meta name="viewport" content="width=device-width, initial-scale=1">
simply check <head> tag and remove that if exist --not Recommended --
another reason maybe related to css media Query
check the media queries in stylesheet and change the font-size

How to run in full screen on start?

http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.

Categories