I have this page with a TinyMCE 5.10.4 Editor if I load the page at full desktop size, and then switch it to mobile sized, the text box appears as normal, I believe this is because while the screen is sized to a mobile device, TinyMCE recognizes it as a desktop screen.
However, if I load the page in mobile sizing it gives me a graybox that links to an external editor, and gives me this gross empty text area that has my background image behind it.
How do I get TinyMCE to always load desktop mode?
I'm not sure if this is what you are looking for, but have you tried overriding the mobile settings to match your existing settings when initializing TinyMCE? This would ensure that even if TinyMCE loaded in mobile mode, it would still look like desktop mode. Something like this:
tinymce.init({
selector: 'myTextArea',
mobile: {
menubar: true,
toolbar_mode: "wrap"
}
});
The docs also specify that you should include the following <meta> tag in your HTML document's <head> to ensure it can detect the correct mode to use.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the reference in the TinyMCE v5 doc where I found this info:
https://www.tiny.cloud/docs/mobile/#configuringmobile
Related
I know that the safari web header uses the following code to set it's color.
<meta id="flutterweb-theme" name="theme-color" content="#2196f3">
(results pictured below)
however, I can't find anywhere to specify what this color is in the flutter docs or anywhere else. Is there somewhere that shows where I can manually set this without a hacky regex on posting to live?
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
I am having problems with media queries not loading CSS or displaying the style correctly.
What I did was create a style480.css for my iPhone and style.css for normal.
I loaded
<meta name="viewport" content="width=device-width, initial-scale=1"/>
across my site so that it would work.
I set the css on the main site to read style 480 so I could stylize for the iphone. Everything looks great on my iphone, and of course it was just a boring list on my desktop.
After I got my style480 finished, I copied/pasted the css into a
#media only screen and (max-width: 480px) {
{
body {width:100%;}
}
in my style CSS.
Sounds pretty standard.
However it is not formatting correctly on my iPhone
The top nav menu (I used html 5 <nav>) is getting pushed to the left, a few of the lists are being floated when they shouldn't be.
It is like the iphone is mixing elements from in and outside the media query.
I have even tried putting the media query on top, putting it on bottom and loading
-webkit-min-device-pixel-ratio : 1.
Same thing, it is like it is mixing the css.
I even tried loading the css files separately on the HTML... exact same thing.
The only way I can get my iphone css to load correctly is if I set it as the main css for the page. When I am loading 2 sets of css it is not working on the iphone (but it works on my laptop)
If I can find a way to view the css from the iphone I might be able to figure out what it is doing, but until them I am at a loss as to why it is not loading the CSS correctly
It is like the iphone is mixing elements from in and outside the media query.
Well, yes, that's how it works. The stuff outside the media query will be used, unless something inside the media query directly overrides it. You shouldn't pase all your code into the media query, just the stuff you want to adjust for that resolution.
A media query doesn't replace your main CSS file, it supplements it.
I have a website based on jQuery Mobile.
I'm using the viewport tag to fit my site to screen size.
So far so good.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
But the Problem is now, that I'm still able to scroll my whole site (the whole mobile safari browser) around the screen.
I tried to set
body {
overflow:hidden;
}
like described in other posts here. But it does not work for me. Anyone an idea how to fix that?
I had the same problem, and ended up using this workaround:
document.ontouchmove = function(event) {
event.preventDefault();
};
Well zooming and scrolling doesn't always have to be related. Your problem here is not with the viewport but with the actual width of your site, if the size is wider than the screen size you will have scrolling issues. You would have to give us a live example so we can help you to find the elements that are overflowing your layout
I compared your site with one of our own. You're using jQuery Mobile 1.0RC1 and we're using 1.0b3. The problem occurs with your site but not with ours.
Maybe try upgrading to the latest jQuery Mobile?
As Jasper pointed out, you have a 404 while trying to fetch these:
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/img/cursors/grab.png (image)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL2/wp_properties.css?ver=1.13 (page)
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js (jQuery Library)
You look like you have a space in a folder name "jquerymobile-FDL 2", I would rename this without the space.
Also I'm not sure if you can have a meta tag inside the title or style tags, maybe move all meta tags to the start pf your head tag?
http://www.w3schools.com/html5/tag_meta.asp
Also you seem to be importing two different versions of jQuery
http://code.jquery.com/jquery-1.5.2.min.js?ver=3.2.1
http://www.m.fdl.de/wp-content/themes/jquerymobile-FDL%202/js/jquery-1.6.2.min.js
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)