When creating a shortcut to a website on Windows Phone 7, the icon it creates is a snapshot of the website instead of any sort of icon that I want it to display. For example, with iOS I can sepcify
<link rel="apple-touch-icon" href="Logo.ico" />
and it uses that icon for the home screen image.
I've tried
<link rel="shortcut icon" href="Logo.ico" />
which seems to work in IE but not IE mobile.
Has anyone successfully created a home screen icon for windows phone 7 / IE7 mobile?
I assume you are referring to pinning a web page to the start screen.
This is by design. You cannot change it.
I think the intention is that you can see a better idea of where you will be taken to when tapping it. This is particularly true if you pins multiple pages from the same site (which would have the same icon otherwise).
If it was possible to set a custom icon, it would need to be 173x173 pixels which wouldn't be the same as any other platform. There would therefore be A LOT of sites/pages which didn't have this specified. If the fallback was to use the default favicon image this is typically only 16x16 (or 32x32) pixels and so would not look good on the 173x173 pixel tile.
All you need is a .css file, a 256x256 image.
.logo {
display:none;
}
#media screen and (max-width: 480px) {
.logo {
display:block;
text-align:center;
width:auto;
padding-top:32px !important;
padding-bottom:32px !important;
}
}
And right before the first html output make a div with logo class and your 256x256 image.
tested on Nokia Lumia 800
Even tough Matt Lacey is right, there is a way you can do this.
It is not a very good way, but Google and others are using it.
Create a HTML-Page that has nothing on it except your tile-icon. This page redirects to your actual website.
Now of course everyone has to pin the HTML-page to the start. You can tell your visitors to pin the HTML-page with a button or something similar.
OR
Create an overlay with JavaScript for your website for every windows phone user that wants to pin your website to the start (determined by a button "pin to start" on your website).
More information on that one:
http://www.russellbeattie.com/blog/creating-a-pinnable-windows-phone-7-tile-for-your-website-like-google
I'm also searching for a better way to create a tile for my blog in WP8 right now but apparently there is no straightfoward way.
Related
Long time browser, first time caller....
I have recently re-written my website to use responsive images (which I am new to), but my s7 chrome seems to always load the "medium" sized image, which is the default src.
I have tried clearing cache and using incognito. It still appears that the medium image is loading, although the only way I'm deducing that is by selecting the image and loading in a new tab and reading the url. I'm not sure if this is accurate.
I've also tried changing the default src to the small image, but the medium is still loading.
However, on FF and Chrome desktop, even with developer tools set to mobile device, it seems to work correctly. Here's the relevant code:
<img
class="vertical"
src="../galleryphotos/doveinsnow_medium.jpg"
sizes=" (max-width: 675px) 271px,
(max-width: 1920px) 620px,
(min-width: 1921px) 1240px,
100vw"
srcset="../galleryphotos/doveinsnow_small.jpg 271w,
../galleryphotos/doveinsnow_medium.jpg 620w,
../galleryphotos/doveinsnow_large.jpg 1240w"
alt="Dove In Snow photograph"/>
Here is a link to the page with the above image, although every page on the site behaves the same way:
http://herschbachphotography.com/gallery_index/doveinsnow.html
What am I missing?
As far as I can see, everything is working well. I checked with Chrome Version 69.0.3497.100 (Official Build) (64-bit) and I can see all 3 versions of your image if I change the viewport from 675px to more than 1920px.
Here are 2 ways you could confirm which image is being shown.
If you place a different marker on each of the 3 images it will be easy to tell which one is being displayed.
Another way is to use Web Inspector (from within your browser, right click on your page then choose 'inspect')
Click the network tab, select img, then reload the page. You'll get full details of all the images on the page.
I hope this helps!
I have a font face loaded for KF8 and it shows up perfectly on the desktop previewer and on my physical Kindle Fire. However, when I load it onto the KDP online previewer, it ignores the font entirely and resorts to the default font settings.
Has this happened to anyone? Are there "safe" KF8 fonts that you've been able to render on the online previewer? Tangerine is a Google web font, only available as a ttf, but I've converted it to an otf and woff, and tried it as such but to no avail. I need a script font for this book of poetry.
Would there be a media query to target the online previewer?
Also, will wrong font (default Kindle font) on the online previewer be what is shown on the Look Inside preview?
My CSS:
#font-face {
font-family: "Tangerine_Bold.ttf";
src: url("Tangerine_Bold.ttf");
}
More CSS in a amzn-kf8 media query:
.section {
font-size: 2.3em;
font-family: "Tangerine_Bold.ttf", serif;
}
OPF:
<item id="font2" href="Tangerine_Bold.ttf" media-type="application/x-font-ttf"/>
I've also tried it as font/ttf and that worked fine, too.
The font looks superb on the actual Kindle. Please help! Amy
The Kindle Previewers, either on-line or stand-alone app, are not guaranteed to be a completely faithful replica of what happens on every device. I have the same problem, actually, with the Nook web previewer (which is also what people use to view samples of a book before buying); it doesn't display data URI-based images (showing a little broken GIF icon instead). In any case, why are you concerned that the KDP previewer is not showing your font?
I am using the MediaElement.js Wordpress plugin in order to play MP3s on my homepage.
But on Internet Explorer 8 I have trouble with the plugin.
Instead of the play button and the volume button, it only shows a blocky rectangle.
I have tested on two different computers with the same result.
You can test it here: http://www.alatarmusic.com/noise-reduction/
It works fine with Firefox and with Safari on my iPhone. And I know, that other sites show up fine in my Internet Explorer. For example, the player on MediaElementJS.com looks correct. It seems, something is wrong with my homepage?
But what could be the reason for this?
Was having the same issue in IE7 as well as IE8:
The fix for me was making sure the filter style was reset:
filter: none;
Your style-sheet contains the following CSS:
.post .content button{background:linear-gradient(top,#ffffff 0%,#e9e9e9 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
Beautified:
.post .content button {
background: linear-gradient(top,#ffffff 0%,#e9e9e9 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
}
The last property, -ms-filter, is a proprietary CSS extension by Microsoft, which is only parsed by Internet Explorer.
The color #ffffff is white, and the color #e9e9e9 is light gray.
Because the effect does only work in Internet Explorer, only IE users will see a light-colored rectangle instead of a play button.
Setting the filter to none gives back the button:
This markup does probably effect other buttons in your Wordpress blog, so removing it might not be an option. Instead, you can add filter:none to the CSS for .mejs-button; e.g.:
.mejs-button{
filter: none;
}
I'm extremely new to Media Queries so I was playing with the min-width: attributes with my Firefox 12.0 and noticed that it just wasn't working. After some playing around and after experimenting with this lovely website
http://barrow.io/lab/media-query-viewport/
I found out that the minimum min-width that my Firefox supports on my machine (it's an XP box) is 615px. Why? I'm trying to play with Media Queries so that I can make a website that works well on many devices as well as desktops. This includes devices that are 480 and 320 pixels wide. With Firefox not allowing me to test the smaller widths it's going to seriously affect my development.
Is there any kind of a work-around for this other than trying a different browser?
Thanks.
EDIT: Now that my Firefox has gone through a few upgrades (now at v22) this is not longer a problem. I'm glad it got fixed.
As of this: http://support.mozilla.org/en-US/questions/772847#answer-125895,
Firefox supports no more than 480 width, so if you want to test for 320 px, you must use a different browser. I would point out that if you want to test smartphones on your site, you should be using smartphone browsers on smartphone hardware... not just desktop browsers set to really small resolutions, which is what it sounds like you were trying to do.
There's a simple workaround: load the site in an iframe of your desired width.
Oh, and as for why, the behavior you observe is due to the Firefox user interface not shrinking down below a certain width for some reason. Often due to extensions mucking with the UI.
Use the Web Developer toolbar extension and you can see a selection of common screen sizes by selecting Resize > View Responsive Layouts
Here is the simple solution
install chromEditPlus Plugin from here http://webdesigns.ms11.net/chromeditp.html
And then Goto Tool-> ChromEdit Plus-> ChromEdit
select userChrome.css pannel
copy and pate below code Save then restart
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#main-window:not([chromehidden~="toolbar"]) {
min-width: 200px !important;
}
Thus solved the Problem this made your windows minimun to 200px
Thanks
I'm building a small iPhone App and by default (apparently) the webkit-touch-callout function that allows a contextual menu when a user taps & holds an element (an image for example). In the case of an image, when you tap-hold it, it'll prompt you to either save or copy the image.
I see all sorts of tips on how to disable this - by default, it should be enabled. However this is not true in my case and I'm trying desperately to ENABLE this.
My HTML is fairly straightforward:
<img src="files/image.jpg" id="theimage" style="margin:30px auto;display:block;width:90%;height:auto;" />
And in my CSS, I have:
* {
-webkit-user-select: auto!important;
-webkit-touch-callout: auto!important;
}
However when I tap-hold an image in my app, nothing happens. When I open Safari in the xCode emulator however and I browse to a Google images image, it works perfectly.
Any help/ideas please?