I would like to create a website that acts like an app. It's super simple, but I still can't figure it out how to get it to work...
It's basically an image that is going to show when you launch the app from your homescreen (I need to somehow make the address & nav bar disappear). When you click on the image, it's supposed to show the next image.
I tried with this line of code
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="images/template/engage.png"/>
and the images are coded like this
<a href="xxx.html">
<img src="xxxx.png"/>
</a>
But the problem is that the images are not size-adjusted to the iphone screen, they become much larger so you have to scroll to see the whole picture.
Also, whenever the image link is pressed a new safari window opens and contains the safari nav bars & address field.
Anyone know how I can make this work?
Thanks in advance..
You can set a maximum width on your image in css to avoid the image being wider then the current window:
img { max-width: 100%; }
You may want to consider using a css framework, like Bootstrap or Foundation. It may help you make a responsive/mobile-friendly website a bit more easily, especially with their grid systems, and responsive ui elements.
try in css style
img{
max-width: 100%;
}
EDIT
Sorry, I was in a hurry .)
Related
I have a requirement from my client that I have to show desktop version on mobile. He told me that he wanted the website responsive so I used bootstrap and now he wants to show desktop view on mobile.
I went over many solutions on the internet, the only one that seems to be closely working for my case is setting the viewport tag.
Here's the code
<meta name="viewport" content="width=1024">
Now the thing is it worked for the most part but still there are some areas where it is still following the responsive view. I also tried with content="width=1200". It worked but there was a small horizontal scroll on the website or in some cases some part from the end is left blank!
Here's the live demo if anyone wants to see it:
http://nextcrawl.co/website/doubledouble/
You already seem to have the proper meta view settings, what's left is to give your .container class a set width:
.container {
width: 1024px;
}
And wrap your header nav and other elements into a .container div as well.
Try this
<meta name="viewport" content="width=device-width, initial-scale=1">
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have my site :
www.emantiss.com
And when Im resizing the site the main image on the top not resizing with the site it self.
Just when im doing a refresh to the page the new size get in action.
Im trying alot of things with max-width and this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
but it doesnt work for me.
If some1 can help me. it Will be great.
If you want images to be sized according to the size of the browser window you have to use relative value, i.e. percentual values. You can use media queries in your css file to limit this behavior to windows not until a certain size.
This is one quick way of doing it provided you are using the <IMG> tag:
CSS
.container{max-width-500px;}
.container img{width:100%;}
HTML
<div class="container">
<img src="YOUR-IMG-URL" />
</div>
I've decided to begin with websites for mobile devices. I'm using http://mobiletest.me to check how the website would look on mobile device, without actually using my mobile all the time to check. However, when I finally made 80% of work and wanted to check on my phone it displays the site on 100% width as a normal website not like an bigger one.
What is it I'm missing in my project to display it the right way? I have main container that holds all other divs inside. Maybe this might be the issue?
div#mobile-container {
position: relative;
width: 100%;
overflow: hidden;
}
Assuming by device size you mean setting the viewport:
<meta name="viewport" content="width=device-width">
Add this to your head tag and it will not give you a normal website size.
Also can't be harmful to add:
<meta name="HandheldFriendly" content="True" />
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);