IOS与Android的UI设配方案

Posted 2023-04-09

参考技术A ios与android共用一套设计效果图 1242*2208

IOS与 Android常用的尺寸中，最大尺寸为6p的尺寸，即1242*2208px

IOS常用尺寸： 1242*2208    750*1334    640*1136    640*960，其中750*1334    640*1136    640*960 同为@2x    1242*2208为@3x，所以750*1334    640*1136    640*960只做一套640*1136就好。

Android 常用尺寸：1080*1920    720*1080    480*800，他们之间相邻是可以整除1.5的，也就是1080除以1.5等于720,720除以1.5等于480，即这三个尺寸可以等比缩放大小，只做一套1080*1920就可以。

那么问题来了。

IOS要做两套尺寸，1242*2208与640*1136

Android要做一套尺寸，1080*1920

这样不就是三套设计图了吗？设计师们会被气死的？

其实，6p的尺寸1242*2208整除1.15就刚好就等于1080*1920，也就是说，1242*2208与1080*1920是可以等比缩放的。

现在就剩下IOS的640*1136。

那么就有人问，那IOS的1242*2208可以直接等比缩放成640*1136。答案是不可以的，因为他们之间不能整除的，但是我们把1242*2208的设计图直接在Photoshop里面直接等不缩放到宽度为640的尺寸，我们会发现原本的2208变成了1138，也就是说比1136多了2个像素，2个像素的误差对于没有有强迫证的也就无所谓了，2个像素的误差我们会将1138硬改成1136，现在你会发现，里面的图标，1136跟1138大小其实是一样。

为什么提到图标呢？因为我们交付的物只需要一套效果图与五套切图就好了。即

一套效果图   1242*2208

五套切图  1242*2208   640*1136   1080*1920   720*1080   480*800

最后注意缩放的图标要细调一下，由于转换有误差，共用一套效果图是有一定风险的，例如UI细节上的风险。开发前，设计师与开发人员要先共同确认此适配方案，要全程沟通，及时改正UI方面的问题。

IOS与Android共用一套设计效果图 750*1334

上面提到过，750*1334    640*1136    640*960 同为@2x，所以750跟640用同一套图标，同一套字体，至于其他尺寸大小，只要跟着尺寸延伸就没问题啦。尺寸750*1334应用1242*2208，则需要把@2x导出成@3x，也就是把字体放大1.5倍，其余的直接放到1242就可以啦。

至于Android版本，我个人的做法是把750*1334直接换算成1080*1920，因为只有1PX像素只差，直接忽略。换算出1080*1920，Android的其他尺寸就按他们之间的规律处理就可以啦。

因为我们交付的物只需要一套效果图与五套切图就好了。即

一套效果图   750*1334

五套切图  1242*2208   640*1136   1080*1920   720*1080   480*800

IOS与Android各做两套设计效果图 

原理跟方案一、二差不多，但为了追求细节上的完美，可以多做一套设计图，即两套设计图：1242*2208和640*1136.

1242*2208适配6P、Android三种尺寸。

1242*2208整除1.5等于1080*1920：

1080*1920整除1.5等于720*1280：

720*1280整除1.5等于480*800：

640*1136适配6 5 5S等尺寸。

如果追求完美，那就需要三套图。即:

1242*2208       640*1136       1080*1920 

还可以加上一套640*960,总之分开做越多套，出来的效果图就会越精细，反之，你懂得，不过这也取决设计师本人和公司领导的决策，会不会给那么多时间。不说废话了，希望能帮到各位！

jquery-ui sortable 不适用于基于 Android 或 IOS 的触控设备

【中文标题】jquery-ui sortable 不适用于基于 Android 或 IOS 的触控设备

【英文标题】：Jquery-ui sortable doesn't work on touch devices based on Android or IOS

【发布时间】：2011-10-08 09:00:08

【问题描述】：

是否有任何修复方法可以使 Jquery-ui 可在基于 Android 或 IOS 的触摸设备上工作？

【参考方案1】：

我建议jQuery UI Touch Punch。我已经在 iOS 5 和 Android 2.3 上对其进行了测试，并且两者都运行良好。

【讨论】：

实际上，这是唯一对我有用且没有任何问题的解决方案。

我实际上在使用触摸打孔时遇到了问题。在 div 上激活 draggable 和 resizabble 后，在停用默认浏览器触摸事件（捏缩放、滑动以移动屏幕等）后，如果它们触摸曾经可调整大小或可拖动的 div 区域，则事件将不再起作用。跨度>

像魅力一样工作

【参考方案2】：

The other answer 很棒，但不幸的是它只能在 iOS 设备上运行。

还有一个由 jquery.ui 的更高版本引起的损坏，这意味着 _touchEnd 事件没有正确重置 mouse.ui 中的内部标志 (mouseHandled)，这会导致异常。

这两个问题现在都应该用这段代码解决了。

/*
 * Content-Type:text/javascript
 *
 * A bridge between iPad and iPhone touch events and jquery draggable, 
 * sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 * 
 * modified by John Hardy to use with any touch device
 * fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset 
 * before each touchStart event
 * 
 */
(function( $ ) 

    $.support.touch = typeof Touch === 'object';

    if (!$.support.touch) 
        return;
    

    var proto =  $.ui.mouse.prototype,
    _mouseInit = proto._mouseInit;

    $.extend( proto, 
        _mouseInit: function() 
            this.element
            .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
            _mouseInit.apply( this, arguments );
        ,

        _touchStart: function( event ) 
            if ( event.originalEvent.targetTouches.length != 1 ) 
                return false;
            

            this.element
            .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
            .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

            this._modifyEvent( event );

            $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
            this._mouseDown( event );

            return false;           
        ,

        _touchMove: function( event ) 
            this._modifyEvent( event );
            this._mouseMove( event );   
        ,

        _touchEnd: function( event ) 
            this.element
            .unbind( "touchmove." + this.widgetName )
            .unbind( "touchend." + this.widgetName );
            this._mouseUp( event ); 
        ,

        _modifyEvent: function( event ) 
            event.which = 1;
            var target = event.originalEvent.targetTouches[0];
            event.pageX = target.clientX;
            event.pageY = target.clientY;
        

    );

)( jQuery );

【讨论】：

太棒了，这似乎有效。尽管Line 62: (TypeError: Result of expression 'event.originalEvent' [undefined] is not an object 我确实在 ipad 中遇到了一些控制台错误，但它似乎仍然有效。我看看能不能修复那个js错误

此代码有效，但它与常规点击冲突（例如对话框的确定​​按钮）。是否可以仅在用户将手指在项目上保持 500 毫秒时才执行可拖动？

@Mike - 这听起来像是我也遇到的问题。我发现只需在上面的代码中删除对return false 的调用，就可以让点击事件在对话框上正常工作

@asgeo1 是的，这解决了问题。他们继续使用return false，它并没有像大多数人认为的那样。

在 sortable 上使用句柄选项时，这对我来说很糟糕。我使用 _mouseCapture 事件对其进行了修补。我的更改位于gist.github.com/2416927

【参考方案3】：

这是为了替换 mouse.ui js 代码还是在加载 javascript 后调用？我无法让它在 Android 平板电脑上为我工作。

为将来发现此问题的任何人编辑 - 使用以下代码使其适用于三星 Galaxy Android 平板电脑：

    /iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) 

var proto =  $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;

$.extend( proto, 
    _mouseInit: function() 
        this.element
        .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
        _mouseInit.apply( this, arguments );
    ,

    _touchStart: function( event ) 
        /* if ( event.originalEvent.targetTouches.length != 1 ) 
            return false;
         */

        this.element
        .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
        .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

        this._modifyEvent( event );

        $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
        this._mouseDown( event );

        //return false;           
    ,

    _touchMove: function( event ) 
        this._modifyEvent( event );
        this._mouseMove( event );   
    ,

    _touchEnd: function( event ) 
        this.element
        .unbind( "touchmove." + this.widgetName )
        .unbind( "touchend." + this.widgetName );
        this._mouseUp( event ); 
    ,

    _modifyEvent: function( event ) 
        event.which = 1;
        var target = event.originalEvent.targetTouches[0];
        event.pageX = target.clientX;
        event.pageY = target.clientY;
    

);

)( jQuery );

【参考方案4】：

我终于找到了一个适用于拖动手柄的解决方案。

转到this page。 在“下载”中，获取“altfix”版本，该版本仅对您指定的元素应用触摸处理。 为下载的JS文件添加脚本标签。 在文档就绪处理程序中为拖动手柄添加触摸处理；例如$('.handle').addTouch()

【参考方案5】：

我将下面的这个 sn-p 与 jquery-sortable 结合使用，它确实允许在我的 iPhone 上进行拖动排序。我在完成第一次排序后遇到了问题，因为列表上的任何滚动都被检测为拖动。

编辑 - 也见这里http://bugs.jqueryui.com/ticket/4143 编辑 2 - 如果我使用整行作为句柄，我就能完成这项工作。它还解决了我在滚动后偏移不正确的问题。

/*
 * A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 */
/iPad|iPhone/.test( navigator.userAgent ) && (function( $ ) 

    var proto =  $.ui.mouse.prototype,
        _mouseInit = proto._mouseInit;

    $.extend( proto, 
        _mouseInit: function() 
            this.element
                .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );

            _mouseInit.apply( this, arguments );
        ,

        _touchStart: function( event ) 
            if ( event.originalEvent.targetTouches.length != 1 ) 
                return false;
            

            this.element
                .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
                .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

            this._modifyEvent( event );

            this._mouseDown( event );

            return false;           
        ,

        _touchMove: function( event ) 
            this._modifyEvent( event );
            this._mouseMove( event );   
        ,

        _touchEnd: function( event ) 
            this.element
                .unbind( "touchmove." + this.widgetName )
                .unbind( "touchend." + this.widgetName );
            this._mouseUp( event ); 
        ,

        _modifyEvent: function( event ) 
            event.which = 1;
            var target = event.originalEvent.targetTouches[0];
            event.pageX = target.clientX;
            event.pageY = target.clientY;
        

    );

)( jQuery );

【参考方案6】：

这对我来说比选择的答案好得多，所以我希望这对其他人有帮助：

http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115.

其他代码的行为很奇怪，当你拖动一个元素时，潜在的放置位置离它应该的位置很远。