I am working on phonegap, when I show keyboard its shows extra white space just above the keyboard.
Please help to find solution.
I cant see whats exact above keyboard, because its hedden below white space. And I am not adding any thing which handles keyboard size.
I have added one line in meta tag of html page where I was getting this error. In that line I added the following:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
and it started working.
Related
I have used the carousel example on Bootstrap3 to make a simple gallery website. On a desktop, it appears as I want, and shrinking the browser causes the navbar to collapse as expected. But it won't collapse on the phone. Instead the whole menu appears as a small version of the desktop view. From reading the docs, I thought it would start collapsed on the mobile view by default.
Since I followed the example code closely and all the bootstrap nav examples appear closed, I'm not sure what piece I'm missing. The site is up: http://artbymanisha.com
Add the following meta tag to in the <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm having a real hard time trying to trouble shoot this issue. I've seen others with the same problems but all seemed to find a fix, none of which work for my clients site. I've tried a number of different combinations but nothing works.
The site is completely responsive on desktop, android, and IOS6 / below, but after the release of IOS7 it no longer displays correctly on any of the IOS7 browsers and defaults to the desktop layout (although fits all on the screen, still not ideal). It's like it's ignoring the viewport settings for retina.
The website in question is www.grupoevents.com
I really appreciate any help as I've already spent hours trying to fix it!
This is probably the 6th variation of viewport I have tried now, still not working :(
What combinations have you used? I have used this in the past and it works for me.
<!-- standard viewport tag to set the viewport to the device's width, Android 2.3 devices need this so 100% width works properly and doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<!-- width=device-width causes the iPhone 5 to letterbox the app, so we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
There is in fact an extra meta tag. Here it is and here's its id. <meta name="viewport" id="sv-meta" content="">
It doesn't show up on desktops, so it's probably being generated by this script <script type="text/javascript" src="http://grupoevents.com/wp-content/plugins/wp-simpleviewer/svcore/js/simpleviewer.js?ver=2.3.2.1"></script>. You should look into the settings for that plugin, but if you can't find any, then you might be able to use this javascript at the end of your header:
<script type="text/javascript">
var svMeta = document.getElementById('sv-meta');
if(svMeta){ svMeta.parentElement.removeChild(svMeta) }
</script>
I am creating an indesign cs6 epub3 fixed layout with landscape only mode, viewing only one page at a time.
I added the meta
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">landscape</meta>
<meta property="rendition:spread">none</meta>
and I also specified the width and height in css and each xhtml file with
<meta name="viewport" content="width=1024, height=768" />
I want the document to appear as one landscape page only, not as a two sides book. Does anyone know how to achieve that?
Ensure that the package element within the .opf file includes version="3.0" and prefix="rendition: http://www.idpf.org/vocab/rendition/#.
e.g.
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="3.0" prefix="rendition: http://www.idpf.org/vocab/rendition/# ibooks:http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/">
See Liz Castro's blog post on fixed layouts for more info.
http://www.pigsgourdsandwikis.com/2012/05/readium-displays-fixed-layout-epub-on.html
I see the color is working and app name working, but not the image. If I place the image on a html element, I see it. So there is no problem with image path or rendering.
<meta name="application-name" content="fice.com"/>
<meta name="msapplication-TileColor" content="#515254"/>
<meta name="msapplication-TileImage" content="original.png"/>
Your markup is correct, so the problem must be with the path to the 'original.png' image.
The Tile Image must be a 144x144 png image. What is your image size ?
Source ; Look at the Community Additions part
I'm in the process of creating my own framework and have been looking at other boilerplates to see how it is done.
I'm currently looking at this bare bones stylesheet and was wondering why it seems to act responsive when you resize the browser, but when I open it on my iPhone or iPad it displays the full screen version of the site.
Sorry if this is noob question, I'm still trying to wrap my head around media queries (no pun intended).
Thanks in advance.
UPDATE: Silly me, I forgot to add the meta tag to tell devices like the iPad to set the device width to the size of its viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
UPDATE: Silly me, I forgot to add the meta tag to tell devices like the iPad to set the device width to the size of its viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">