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
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 am using media queries to successfully resize/style various elements on a page when viewed on smart phone browsers.
The difficulty I run into is with Bing Maps. The map never resizes although the div it is within does. Inspecting the elements shows that the map element.style is set to 100% width and height.
I have included
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
to prevent browser zooming.
Any suggestions appreciated
I've done this before without any issues. Have you specified a CSS position on the map? Take a look at this code sample I put together: http://code.msdn.microsoft.com/Cross-Platform-Bing-Maps-e96600d5#content
i have a web view embedded in one of my view controllers. It has a rect of 600x800. It seems like when i make a url request, its telling the web server it is 768px wide which is the width of the entire ipad in portrait.
We have the width=device-width set in the HTML header and so its giving me back a 768x#### page and causing the web view to scroll horizontally since the rect for my webview is < 768.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
How do i setup this webview so it reports the correct (smaller) width to the web server?
Update
I did find some code set set the width in the HTML inside webViewDidFinishLoad and it does work, but is there a better way of doing this? Seems like a hack.
NSString *jsCmd = #"var viewport = document.querySelector('meta[name=viewport]');";
jsCmd = [jsCmd stringByAppendingFormat:#"viewport.setAttribute('content', 'width=%i, initial-scale=1.0, user-scalable=1');", (NSUInteger)_webView.frame.size.width];
[_webView stringByEvaluatingJavaScriptFromString:jsCmd];
Thanks
Skip giving a value for width in the meta tag.
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
The meta tags are sent by the server and interpreted by the browser. It is your browser (safari) who uses 768 as the size of the device-with (which is correct).
The solution is, on the server side to detect the iframe call and to send something like:
<meta name="viewport" content="width=600; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
In order to detect the iframe call on the server side the simplest thing is to add a URL parameter.
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'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">