Question

我目前正在整合一个网站，我在处理移动或桌面上不在同一个地方的元素时遇到了一些小问题。

这是（简化）代码：

<style name="TextView" parent="android:Widget.TextView">
        <item name="android:fontFamily">serif-monospace</item>
    </style>

所以我在移动设备上有“我的文字输入”元素外面“地图”一个（它是移动优先）。当它显示在桌面上时，我希望它被放置在里面“map”元素中。

您是否知道如何在没有重复内容的情况下进行操作？我考虑过两次（内部和外部）编写元素并显示一个或另一个，但我想避免这种解决方案。

如果需要，欢迎使用JS / jQuery解决方案。

谢谢！

Answer 1

使用以下代码抱歉格式化我在发布时遇到问题

$(document).ready(function(){
appendDiv();
});
$(window).resize(function(){
 appendDiv();
 });

//在桌面和平板电脑视图上将div附加到另一个

function appendDiv() {
if ($(window).width() > 767) {
$('.my-text-input').detach().appendTo('.map');
}}

Answer 2

试试此代码

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // tasks to do if it is a Mobile Device
  $('.map').before('<div class="my-text-input">Input</div>');

}else // for desktop
{
  $('.map').append('<div class="my-text-input">Input</div>');
}

在浏览器调整大小时将div移到另一个内部

2 个答案: