HTML5 whole website to match screen resolution on mobile devices - javascript

I have a web app that I created using html5,jquery and css that contains,
<html>
<head>
<title>Pascal Pattern Scan Laser Photocoagulator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (1462_Next_Treatment_Flat.psd) -->
<style type="text/css">
<!--
As you can see it was sliced in photoshop so for each slice i have a css div class e.g.
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
When viewing on mobile devices the width matches the screen however the height is too big for mobile screens (user has to scroll down) how can i match the resolution. Similar to a responsive design?
Also do i need to set height as AUTO in the html part of the code or the css or both?
<div class="Table_01">
<div class="id1462-Next-Treatment-Flat-01">
<img src="images/1462_Next_Treatment_Flat_01.jpg" width="1024" height="479" alt="">
</div>

You have to implement Media Queries in css. Please go through below mentioned link for specific implementations...
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Related

Could we replace images with srcset?

There is something that I have to fix it about changing img on mobil and tablet with another different images I couldn't fix it with jQuery (I'm a beginner with jQuery) and I'm trying to do it with html5.
Is there any way to change the image on the tablet and mobile versions with srcset? What can I do? Why is my code not working as expected? How can I change img src on 768px and 480px with jQuery? The image will be changed dynamically, that is why I don't want to do with just css (media queries).
This is my another code
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<img src="http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/1.jpg"
srcset="http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/2.jpg 1000w, http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/3.jpg 768w,http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/4.jpg 400w">
</body>
</html>
add style to the image so that it is always 100% of the screen-width
<img src="http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/1.jpg"
srcset="http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/2.jpg 1000w, http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/3.jpg 768w,http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/4.jpg 400w" style="width:100%">

CSS Disappearing on Mobile Device

Using the Bootstrap front-end framework and after a certain section of the website, the CSS will not appear on mobile devices but will when viewing it from a browser. I'm unsure if this section is somehow in an interference with another section of the site. The code and CSS for the div in question is below:
HTML:
<div class="project-right">
<div class="container">
<div class"row">
<div class="col-md-8">
....
</div>
<div class="col-md-4">
...
</div>
</div>
</div>
</div>
CSS:
.project-right {
background-color: black;
padding: 110px 0px;
}
I've included <meta name="viewport" content="width=device-width, initial-scale=1"> in my section of the website.
Website can be found at: http://bit.ly/1CEdcBj.
Try to set media property in your header link to value :
'only screen and (max-device-width: 480px)' ...
The shall force the css to get applied on both screen and max-device-width (i.e your mobile device) :
<link rel='stylesheet' media='only screen and (max-device-width: 480px)'
href='/your/css/file.css' />
I haven't tried it though...
I am not sure which section you are talking about but there are some media queries in your CSS code, which show elements on just big screens such as this:
#media only screen and (min-width: 600px)

Div size differes when viewport is used

take a look at this site www.naamdesigns.com
view this site with desktop and also with mobile. In mobile, the header div in blue does not fit the screen entirely, it covers only 50%.
why this problem occur?
Why did you set overflow-x: hidden; on body tag? I guess on mobile 100% width is only the visible part, where the whole content doesn't fit, but just half of it.
lets try to put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Added :
this is my idea, i dont know it's would works. Lets make a container to wrap all yor contents.
<body>
<div id="wrapper" style="width:100%">
<div id="your_header"style="width:100%"></div>
<div id="your_body" style="width:100%"></div>
</div>
</body>

Automatically resize HTML buttons based onscreen size?

I am making an android mobile app using HTML and JavaScript with CSS. The problem is, I sent it to my friend to test, and the buttons are tiny on his screen. Using CSS, I changed the button size by changing text size in CSS.
Is there a way that I could have the button size change automatically so that it is proportional to the screen size?
If not, how would I make the buttons bigger for larger screens, and smaller for smaller screens?
Please note: I am only using HTML, JavaScript, and CSS. If you give me anything else, please mane it possible to copy and paste because I will not know how to incorporate it in my code.
It probably be done by adding this tag in header
<meta name="viewport" content="width=device-width" />
or/and setting width in percentage.
ex.
<input type="text" style="width:30%" />
It sounds like you want a 'responsive' design, use media-queries and 'breakpoints'.
The breakpoints will be the width for each device you want to support.
for an iphone 5 you would use '641px' as the max width.
you first define the standard class. Then deviate from that using the media queries with css like so
#button{
width:100%; // first define your class
}
#media (max-width: 640px) {
#button {
width:50%;
}
}
http://iosdesign.ivomynttinen.com
You need to use the meta tag for responsive:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
The HTML:
<input type="submit" name="" class="my_button"/>
The CSS:
input.my_button{
width:50%;
height:32px;
display:table;
margin:0 auto;
}
#media screen and (max-width:360px){
input.my_button{
width:100%;
}
}

How to make Flexslider display different aspect ratio images on iOS?

I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad.
I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. As it turns out I was able to reduce it to a simple example. Here are screen shots of the example in iOS and OSX Safari.
The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. You can find a working example on my website. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000
});
});
</script>
<link rel="stylesheet" href="flexslider.css" />
<style type="text/css">
#example{
width:100%;
height:auto;
max-width:400px;
background-color:#f0f0f0;
}
</style>
</head>
<body>
<h1>Flexslider iOS bug example</h1>
<section id="example">
<div class="flexslider">
<ul class="slides">
<li><img src="tallslide.jpg"></li>
<li><img src="wideslide.jpg"></li>
</ul>
</div>
<p>Text after slider</p>
</section>
</body>
</html>
I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. None of those made it any better.
My question is:
How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios?
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.
If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden;
Something like
.flexslider {
height: 300px;
overflow: hidden;
}
You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights.
Something like that?! Customized according to your example ;) (flexslider 2.1 tested)
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000,
after: function(slider){
$(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
}
});
});
From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159

Categories

Resources