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%;
}
}
Related
so i made a website that has images multiple textboxes and etc, some user percentage and some use pixels by that i mean they use that to be in the specific place there in right now. So if you connect your laptop to a tv and put the website it will automatically scale up perfectly it just causes the things to be a little blurry but everything is in place. i was wondering how i can add like a function for my website that selects everything in the page and just shrinks it or expands it depending on the screen size, i dont care if it gets blurry after shrinking or expanding. Or if anyone has any other idea on how i can make everything fit to page no matter screen size it would be very helpful.
First of all, there are multiple ways to make a site responsiv,
the easiest way are the media queries:
#media only screen and (max-width: 600px) {
body {
background: #fff;
}
}
#media only screen and (min-width: 601px) {
body {
background: #ccc;
}
}
This can also be applied to different stylesheets:
<link rel="stylesheet" type="text/css" href="/styles/gardener_main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/additional.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_800.css" media="screen and (min-width: 800px)"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_799.css" media="screen and (max-width: 799px)"/>
They are basicly telling the devices what styles to use for what display size.
For the start you can work through this:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
to get a better understanding of the media query itself.
But! Most somehow tend to forget that you also need to adjust your html:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Depending on how much devices and how much older devices you want to support you can also add a switch that basicly replaces everything:
<?php
$mobrowser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i',
strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobrowser++;
}if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE'])
or isset($_SERVER['HTTP_PROFILE'])))) {$mobile_browser++;}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');
if (in_array($mobile_ua,$mobile_agents)) {$mobrowser++;}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {$mobrowser++;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {$mobrowser = 0;}
if ($mobrowser > 0) {
echo '
HTML old mobile devices etc
';
}
else {
echo '
HTML desktop
';
}?>
With this enormus something you can grab the mobile agents,
but such things are only interesting if you really want to support
historic devices.
Maybe you could try to add some css like
#media screen and (min-width: 1240px) {...}
Responsive
Here is how you can test it. Just open it in browser, go right click inspect element or f12. I marked with red where you can see that, how it will look on different sizes.
I am using the ASP Net Sprites package to create CSS Sprites on my website.
It is working, but the images it generates do not appear when printed.
The code generated at HTML level is:
<img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
How can I get the logo image to appear when a user prints the page?
I have tried adding this in my print.css stylesheet, but it didn't work:
#siteLogo
{
visibility: visible;
}
The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.
For Chrome and Safari you can add the following in your CSS:
#media print
{
* {-webkit-print-color-adjust:exact;}
}
For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
You could have an own media-query for print and use :before selector with the attribute "content".
Put this in the media query and it will insert the image when you try to print:
p:before { content: url(images/quote.gif); }
http://www.htmldog.com/reference/cssproperties/content/
It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img /> tag.
It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:
.class-name {
background: url('your-image.png') !important;
}
Also you can use these useful printing rules and put them at the end of css file:
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>
Here is the background image called in your main css file used in browsers.
.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}
Note: You can also use the #media rule instead of importing files if you want to avoid making an extra http request.
reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
Try this:
#media print {
body:before {
content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
position: absolute;
z-index: -1;
}
}
If you use Internet Explorer, this is how you do it:
Go to the 'Tools' menu.
Click on 'Internet Options'.
Click on the 'Advanced' tab.
Put a check on print background color and images.
<div style="position: relative;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello, world.
</div>
</div>
This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm
set media="print"
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
Reference
When you are trying custom printing through creating print format directly with java script and if there is tag is there then it won’t be print because browser intensely send request to printer without waiting to load image in cache.
So good practice add image which you want to print on html page and make it visibility false.
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>
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/
I made an html app that has a form, for some smartphone-resolution devices (460 x 320 pixels), and it appears fine on my smartphone. When I ran it on my Android tablet (which is a Samsung Tab 3- 1024 x 600 Pixels), the app's background image was tiled/repeated. I was able to remove the repeating background image using background-Repeat:no-repeat;, but now what I am left with is a lot of white space at the bottom and to the right of the app, where the repeated image was. I am not sure what this white space is. Is it the layout viewport, or the canvas, the margins, padding, or something else?
I want to shrink the white space to the same size as the form because when I re-size (larger) my future smartphone-resolution apps for tablets, I want one app for all tablets sizes, regardless of any larger resolution tablets it may be run on. The page below shows how the app kind of looks on my tablet, but instead of yellow space, there is white space:
https://developer.mozilla.org/it/docs/DOM/element.clientHeight
I've tried some settings with CSS, meta viewport, window.resizeTo and window.resizeBy. Also, I have read up on screen.height, outerHeight, outerWidth, offsetWidth, clientHeight and clientWidth, but I don't know where these commands should go in the html of the app, or even if they will have any affect. Window.resizeTo(320,460) kind of worked in Safari desktop, but not in Chrome desktop. Window.resizeTo had no affect on my Android tablet whether the app was run as an html file (regardless of which browser was used) or as an .apk.
I have been told that resizing a mobile browser/white space (which ever this may be called) isn't possible, but I refuse to believe it. If it is indeed impossible, is there something else that I can do with the white space like make it transparent, or change it to other colors to match my apps? Or, is there some other alternative that I could try?
As an example, my Android tablet's stock video player app has a feature that allows it to be less than full screen. Surely it should be possible to do this with with an html app using html5, Phonegap, the Android API, CSS, webview, etc. instead of having the extra white space. Please see an example here: http://www.youtube.com/watch?v=2swd06TNYXc
The html for an example form is below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablet Test</title>
<meta name="generator" content="WYSIWYG Web Builder 8 -
http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
background-color: #1E90FF;
border: 0px #000000 solid;
}
#TextArea1
{
border: 1px #C0C0C0 solid;
background-color: #FFFFFF;
color :#000000;
font-family: Arial;
font-size: 13px;
text-align: left;
}
</style>
</head>
<body>
<div id="wb_Form1"
style="position:absolute;left:0px;top:0px;width:320px;height:460px;z-in
dex:3;">
<form name="Form1" method="" action="" enctype="text/plain" id="Form1">
<textarea name="TextArea1" id="TextArea1"
style="position:absolute;left:112px;top:106px;width:98px;height:98px;z-
index:1;" rows="5" cols="11"></textarea>
<button id="AdvancedButton1" type="button" name="" value=""
style="position:absolute;left:86px;top:364px;width:150px;height:34px;z-
index:2;"><div style="text-align:center"><span
style="color:#000000;font-family:Arial;font-size:13px">Send</span></div
></button>
</form>
</div>
</body>
</html>
You are not explaining what exactly you want. Remove whitespace - you could theoretically set the viewport width to the required size and the page will have no "white space".
For Example:
<meta name="viewport" content="width=460,user-scalable=no">
But this will take up the entire width of the WebView - which based on the video you posted (which is of a native application) you don't want.
IF you are using PhoneGap or some other kind of WebView based approach to display this, then you can set the background color of the WebView to be transparent (But this may have some issues depending on the version of Android you are developing for: Android WebView style background-color:transparent ignored on android 2.2)
EDIT
I've made an available version of the example here:
Orig. Example: http://jsbin.com/orIFUpEq/1/edit
The site is designed for fixed width - it's NOT POSSIBLE to make the browser transparent, unless you are using a WebView.
The best option is to make your design flexible. The easiest version to come up with is this: http://jsbin.com/UTENavu/4/edit
Essentially made the body and html 100%, made the body background the blue color, and centred the form in the middle but removing the position absolute and adding the following CSS:
#wb_Form1
{
position: relative;
border: 0px #000000 solid;
margin: 0 auto;
}
My guess is that this is generate code from some kind of tool based on:
<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">
So this may need a little work to get it to be happy with your changes.
Either way - you seem to be designing a fixed layout and that simply won't work out well across devices.
I spoke with a local webmaster that I know, and he told me that the
amount of white space there is depends on how the browser is
programmed. After speaking with him, I did more research and learned
that browsers are programmed to have a layout viewport of different
sizes, depending on the company it is put out by, for example (only),
Safari browsers may have a layout viewport that is 1024 px wide, and
that is why there is all the extra white space around the form in that
browser. So technically it is not impossible what I want to do, I just
had to find a workaround, since I don't know how to reprogram the
browsers my apps will be on.