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
Related
So basically as the title suggests. I have a react-native-webview component in my app and I want it to show a SoundCloud player via the SoundCloud widget. I also want to use the available methods exposed by the widget API (for example getDuration), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.
Option 1:
The source prop that I pass to the WebView is a static HTML string:
<html>
<head>
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
>
</iframe>
</body>
</html>
That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:
The red border marks the WebView component. I want the video to take up that entire space, which I can do with setting the width & height attributes of the iframe to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.
Option 2:
The source prop that I pass to the WebView is a SoundCloud link, for example:
source={{uri: https://w.soundcloud.com/player/?visual=true&url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&show_artwork=true}}
That makes the video player look just right:
But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some iframe element that I need to to pass into SC.Widget in order to be able to use all the methods and listeners that I need. There is no iframe here! The HTML content that renders inside the WebView is actually the exact inner document that would render inside the iframe if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.
So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.
Solved, used this static HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://w.soundcloud.com/player/api.js"></script>
</head>
<body>
<iframe
id="sound-cloud-iframe"
src="${finalUri}"
scrolling="no"
style="width: 100%; height: 100%;"
>
</iframe>
</body>
</html>
The meta tag was the key to success here (https://www.w3schools.com/css/css_rwd_viewport.asp)
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 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 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