I'm doing a lot of responsive design development at the moment, as are all front-end devs.
One thing i would love to know is the exact current screen size.
Chrome has it:
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
How can I display the current screen size with Firefox?
Its a very old question but worth mentioning.
Firefox now has "Responsive Design Mode" Which is the best to doing responsive testing that I've seen on any browser.
the shortcut is Cntrl+Shift+M and you're in a fantastic mobile view with complete control over the size of the screen whilst still being able to open the dev tools.
Update - Chrome Tools
Its been a while since this answer and since Firefox's mobile development tools haven't changed a whole deal, Google Chromes have changed a whole lot and are so fantastic it would seem silly not to share for those that haven't already used it.
Hit F12 then this will open, then hit the small mobile icon to bring up the mobile development tools:
This will open the mobile dev tools which looks like this
From here you can change all sorts of things, but easily between devices with the pre-defined devices and user-agents automatically set for you.
More over you can change things, like touch, geo-location etc
Like this FIDDLE
$(window).on('resize', showSize);
showSize();
function showSize() {
$('#size').html('HEIGHT : '+$(window).height()+'<br>WIDTH : '+$(window).width());
$('#size2').html('HEIGHT : '+screen.height+'<br>WIDTH : '+screen.width);
}
EDIT: added screen size as well, use whatever you need!
You can put this as a bookmark. It should (hopefully) work cross-browser. Click on the display to get rid of it. http://jsfiddle.net/krWLA/8/
(function() {
var v=window,d=document;
v.onresize = function() {
var w = v.innerWidth ? v.innerWidth :
d.documentElement.clientWidth,
h = v.innerHeight ? v.innerHeight :
d.documentElement.clientHeight,
s = d.getElementById('WSzPlgIn'),
ss;
if (!s) {
s = d.createElement('div');
s.id = 'WSzPlgIn';
d.body.appendChild(s);
s.onclick = function() {
s.parentNode.removeChild(s)
};
ss = s.style;
ss.position = 'absolute';
ss.bottom = 0;
ss.right = 0;
ss.backgroundColor = 'black';
ss.opacity = '.5';
ss.color = 'white';
ss.fontFamily = 'monospace';
ss.fontSize = '10pt';
ss.padding = '5px';
ss.textAlign = 'right';
}
s.innerHTML = 'w ' + w + '<br />h ' + h;
};
})()
Related
Discovering the Web Audio Api I wanted to draw a waveform for sound files. Now, I am aware of the image dimension limitations in some browsers, and I tried to look them up, but they seem to be ever changing (or at least memory differences like Chrome Desktop vs Chrome Mobile).
I tried to look up how to test if an image, or a Canvas / 2D Context can be of a certain size with almost no success. However, when testing this thing in Firefox I did get an error in the console so I tried the following method:
wfWidth = source.buffer.duration*100;
document.getElementById("waveform").width = wfWidth;
wfCtx = document.getElementById("waveform").getContext("2d");
var success = false;
while(success == false)
{
try {
var temp = wfCtx.getImageData(0,0,10,10); // this produced an error further down the code, so I use this as my test case.
success = true;
} catch(err) {
wfWidth = wfWidth / 2;
document.getElementById("waveform").width = wfWidth;
wfCtx = document.getElementById("waveform").getContext("2d");
}
console.log(success);
}
This does seem to work in Firefox as the console first outputs false showing that the canvas is too big and then true after halving the width of the canvas and the waveform is shown.
However, in Google Chrome on Desktop the canvas seems to be of a certain size (as indicated by a scroll bar) but it is totally blank. When I right-click to save image, it is a 0 byte txt file. On Chrome Mobile (android) I get this little square sad face. Guess that method of checking doesn't work in Chrome.
What would be the best way to test if the canvas is, well, valid, and resize if it is not?
Please forgive my lack of knowledge!
I'm interested in creating a script/web application for my company and I've been diligently looking for the answer to my question.
Is it possible to detect iPhone or iPad models with useragent strings and then display a message to the effect of "You have an iPhone 5C"?...
If not, what are my other possible options?
I have seen quite a few posts about detecting if it were an iPad or and iPhone for browser formats.. and Also there is a SDK code that emulates the concept I'm trying to achieve.
I'm low on experience... but keen to learn!
The user-friendly name of the models are not available via API. Apps that I have been involved with that care use data compiled from several websites and build-up some kind of in-app list. You need both a list of models and their user-friendly name equivalents. Both are available via google searches. I don't know of a single, perfectly comprehensive, list, but a bit of searching will find several sites, whose data can be distilled into a single list.
To get the model number of the device to use as a key, the following code is used:
[UIDevice currentDevice].model
I assume you are trying to get the info from a visit to your website. You cannot know exact model of the device with web scripts, at least in my knowledge. But you can determine if the user is using an iPhone, iPad or iPod. Following are two options:
Javascript:
var Apple = {};
Apple.UA = navigator.userAgent;
Apple.Device = false;
Apple.Types = ["iPhone", "iPod", "iPad"];
for (var d = 0; d < Apple.Types.length; d++) {
var t = Apple.Types[d];
Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
Apple.Device = Apple.Device || Apple[t];
}
// is this an Apple device?
alert(
"Apple device? " + Apple.Device +
"niPhone? " + Apple.iPhone +
"niPod? " + Apple.iPod +
"niPad? " + Apple.iPad
);
PHP script:
// Apple detection array
$Apple = array();
$Apple['UA'] = $_SERVER['HTTP_USER_AGENT'];
$Apple['Device'] = false;
$Apple['Types'] = array('iPhone', 'iPod', 'iPad');
foreach ($Apple['Types'] as $d => $t) {
$Apple[$t] = (strpos($Apple['UA'], $t) !== false);
$Apple['Device'] |= $Apple[$t];
}
// is this an Apple device?
echo
"<p>Apple device? ", ($Apple['Device'] ? 'true' : 'false'),
"</p>n<p>iPhone? ", ($Apple['iPhone'] ? 'true' : 'false'),
"</p>n<p>iPod? ", ($Apple['iPod'] ? 'true' : 'false'),
"</p>n<p>iPad? ", ($Apple['iPad'] ? 'true' : 'false'),
'</p>';
For more information, read here.
Since your tags and statement is a bit confusing, just on the off-chance that If you are using iOS sdk and building an iOS app, you can simply get the model from one line like:
[[UIDevice currentDevice] platformString]
I am writing a Firefox add-on, and I am using the high-level Firefox Add-on SDK API.
My add-on opens a new window, and opens several tabs in that window.
How can I get this new window to open in the background? I do not want its opening to disrupt the user's focus on the active window.
When opening a tab, there is an inBackground option that can be used for this.
I have searched the windows module documentation high and low, but I cannot find a similar option for when creating new windows!
How do I open this new window in the background?
If Mozilla forbids me from doing so, is there a way I can very quickly push the new window to the background just after it opens, so that it is minimally disruptive?
Not disallowed. Perfectly fine. Do it with a features option of alwaysLowered I think.
Full list of features found here: https://developer.mozilla.org/en-US/docs/Web/API/window.open#Position_and_size_features
var sa = Cc["#mozilla.org/supports-array;1"].createInstance(Ci.nsISupportsArray);
var wuri = Cc["#mozilla.org/supports-string;1"].createInstance(Ci.nsISupportsString);
wuri.data = 'about:blank';
sa.AppendElement(wuri);
let features = "chrome,dialog=no,alwaysLowered";
var wantTabs = false;
if (wantTabs) {
features += ',all';
}
/*var sDOMWin = aTab.ownerGlobal; //source DOMWindow*/
if (PrivateBrowsingUtils.permanentPrivateBrowsing/* || PrivateBrowsingUtils.isWindowPrivate(sDOMWin)*/) {
features += ",private";
} else {
features += ",non-private";
}
var XULWindow = Services.ww.openWindow(null, 'chrome://browser/content/browser.xul', null, features, sa);
You can tag this code onto the end to do something after the XULWindow loads:
XULWindow.addEventListener('load', function() {
//can lower or raise the window z-index here
var DOMWindow = XULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
DOMWindow.gBrowser.selectedTab.linkedBrowser.webNavigation.stop(Ci.nsIWebNavigation.STOP_ALL);
}, false);
I have this Javacsript code that checks to see if there is a DIV named "google-ad", and if there is, it writes in a the necessary code to display the Google Ad.
This works great in browsers like Firefox, Chrome, Safari on Mac, and Android.
However, when I bundle this code with Adobe's Phonegap Build, and deploy it to iPhones, it behaves strangely. It launches a browser window displaying just the Google Ad alone. In order to keep using my app, every time I change a page and a new Google Ad is loaded, I have to close the browser window to get back to the app.
Why is this code launching browser windows outside of my Phonegap app on iPhone?
if(document.getElementById("google-ad")
&& document.getElementById("google-ad") !== null
&& document.getElementById("google-ad") !== "undefined")
{
if(userStatus.status == 0)
{
document.getElementById("centre").style.padding = "137px 0 12px 0";
document.getElementById("header-container").style.margin = "-138px 0 0 0";
document.getElementById("header-container").style.height = "132px";
document.getElementById("header-username").style.top = "52px";
document.getElementById("google-ad").style.height = "50px";
document.getElementById("google-ad").style.width = "320px";
document.getElementById("google-ad").style.backgroundColor = "#f0ebff";
document.getElementById("google-ad").style.display = "block";
window["google_ad_client"] = 'ca-pub-0000000000000000';
window["google_ad_slot"] = "00000000";
window["google_ad_width"] = 320;
window["google_ad_height"] = 50;
window.adcontainer = document.getElementById('google-ad');
window.adhtml = '';
function mywrite(html)
{
adhtml += html;
adcontainer.innerHTML = adhtml;
};
document.write_ = document.write;
document.write = mywrite;
script = document.createElement('script');
script.src='http://pagead2.googlesyndication.com/pagead/show_ads.js';
script.type='text/javascript';
document.body.appendChild(script);
}
Problom you are facing is becuase google adsens is using iframe see in show_ads.js
e=["<iframe"],d;for(d in a)a.hasOwnProperty(d)&&ka(e,d+"="+a[d]);e.push('style="left:0;position:absolute;top:0;"')
and when that happens in phonegap(generally webview) it will open new page to show it.
there are some ways to turn around but best way i could suggest is using google offical adsense sdk for moile :
https://developers.google.com/mobile-ads-sdk/docs/
it is native but you could easily connect it to you html app with simple plugin(i could help you with that if you want)
the thing you are trying to do now i think cause your app to be rejected by apple so use google official sdk.
I'm currently working in a system with a bit of a legacy presentation layer -- it uses frames (actual, in a frameset frames).
To get some event handling up and running I would like to get events when the frame resizes or at least be able to measure the height of the frame somehow. There seems to be no cross browser way to do this. Has anyone tried anything like this?
Try this - Also you might have to try this on all browsers too -
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
function getFrameSize(frameID) {
var result = {height:0, width:0};
if (document.getElementById) {
var frame = parent.document.getElementById(frameID);
if (frame.scrollWidth) {
result.height = frame.scrollHeight;
result.width = frame.scrollWidth;
}
}
return result;
}